Masalah IE8 dengan Twitter Bootstrap 3

Saya membuat situs menggunakan Bootstrap Twitter baru. Situs ini terlihat baik dan berfungsi di semua browser yang diperlukan kecuali IE8.

Di IE8 tampaknya menampilkan elemen-elemen versi mobile tetapi membentang di layar penuh desktop saya. Saya percaya masalah yang saya alami adalah bahwa bootstrap Twitter lebih dulu mobile. Jadi untuk beberapa alasan IE8 akan menggunakan opsi ini.

Saya juga memperhatikan bahwa containerkelas tampaknya tidak menarik dalam properti CSS max-width sebagaimana dimaksud. Adakah yang bisa melihat kesalahan saya?

<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<script src="/SiteFiles/js/modernizr.js"></script>

<!-- CSS -->
<link href="/SiteFiles/css/main.css" rel="stylesheet">

<header>
    <div class="topArea clearfix">
        <div class="container">
            <div class="topLinks">
                <div class="btn-group">
                    <span class="flag" data-toggle="dropdown">&nbsp;</span>
                    <ul class="dropdown-menu">
                        <li><a href="#">Country 1</a></li>
                        <li><a href="#">Country 2</a></li>
                        <li><a href="#">Country 3</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Country 4</a></li>
                        <li><a href="#">Country 5</a></li>
                        <li><a href="#">Country 6</a></li>
                    </ul>
                </div>
                <div class="visible-sm btn-group">
                    <div class="plus" data-toggle="dropdown"><i class="icon-plus icon-2x">&nbsp;</i></div>
                    <ul class="dropdown-menu">
                        <li><a href="#">Parts & Service</a></li>
                        <li><a href="#">Store Locator</a></li>
                        <li><a href="#">Find a Service Centre</a></li>
                        <li><a href="#">Parts List</a></li>
                        <li><a href="#">Tool Vibration</a></li>
                        <li><a href="#">Resource Centre</a></li>
                        <li><a href="#">Media Centre</a></li>
                        <li><a href="#">Register your Tools</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">
                            <button type="button" class="btn btn-default">Where to Buy</button></a></li>
                    </ul>
                </div>
                <div class="topNav">
                    <ul class="hidden-sm">
                        <li>
                            <div class="btn-group">
                                <a href="#" data-toggle="dropdown">Parts & Service</a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Store Locator</a></li>
                                    <li><a href="#">Find a Service Centre</a></li>
                                    <li><a href="#">Parts List</a></li>
                                    <li><a href="#">Tool Vibration</a></li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="#">Resource Centre</a></li>
                        <li><a href="#">Media Centre</a></li>
                        <li><a href="#">Register your Tools</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">
                            <button type="button" class="btn btn-default">Where to Buy</button></a></li>
                    </ul>
                </div>
                <div class="searchArea">
                    <input type="text" />
                    <a href="#" class="goBtn">GO</a>
                </div>
            </div>
        </div>
    </div>
    <div class="mainNavArea">
        <div class="container rel">

            <div class="logo">
                <img src="/SiteFiles/img/logo.png" title="Milwaukee - Nothing but heavy duty" alt="Milwaukee - Nothing but heavy duty" />
            </div>
            <div class="navi">
                <div class="navbar">
                    <div class="container">

                        <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                        <!-- Place everything within .navbar-collapse to hide it until above 768px -->
                        <div class="nav-collapse collapse navbar-responsive-collapse">
                            <ul class="nav nav-justified">
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Power Tools</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Power Tools</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Hand Tools</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Hand Tools</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Test & Measurement</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Test & Measurement</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Accessories</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Accessories</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- /.nav-collapse -->
                    </div>
                    <!-- /.container -->
                </div>
                <!-- /.navbar -->
            </div>

        </div>
    </div>
</header>

Anda mendapatkan CSS dari response.js CDN (bootstrapcdn.com) hanya berfungsi untuk file lokal. Jadi cobalah situs web Anda di IE8 dengan salinan lokal bootstrap.css. Atau baca: Pengaturan CDN / X-Domain

Catatan Lihat juga: https://github.com/scottjehl/Respond/pull/206

Memperbarui:

Silakan baca: http://getbootstrap.com/getting-started/#support

Selain itu, Internet Explorer 8 membutuhkan penggunaan response.js untuk mengaktifkan dukungan permintaan media.

Lihat juga: https://github.com/scottjehl/Respons

Untuk alasan ini templat dasar berisi garis-garis ini di bagian kepala:

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="../../assets/js/html5shiv.js"></script>
  <script src="../../assets/js/respond.min.js"></script>
<![endif]-->

Saya juga harus menetapkan tag META berikut:

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 

Saya memiliki masalah yang sama ketika beralih dari Bootstrap 2 ke 3. Saya sudah mendapat response.js dan html5shiv.js dan mengatur meta saya ke edge. Saya melewatkan bahwa dari 2 hingga 3 tipe elemen navbar telah berubah. Di Bootstrap 2 itu nav. Di Bootstrap 3 sekarang header. Jadi untuk sepenuhnya menyelesaikan masalah saya harus

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Letakkan ini tepat setelah saya memuat css saya:

<!--[if lt IE 9]>  
    <script src="~/Content/compatibility/html5shiv.js"></script>
    <script src="~/Content/compatibility/respond.min.js"></script>
<![endif]-->

dan kemudian berubah

<nav class="navbar" role="navigation">
</nav>

untuk

<header class="navbar" role="navigation">
</header>

Oh dan untuk ukuran yang baik saya juga menambahkan

<meta name="viewport" content="width=device-width, initial-scale=1.0">

hanya karena itulah yang dimiliki situs Bootstrap sendiri.

Dalam kasus saya, bootstrap minified CSS menyebabkan masalah. Untuk membuat bootstrap 3.0.2 responsif di IE8 (ditiru menggunakan Alat Pengembang F12) saya harus:

1 - Tetapkan bendera yang Kompatibel dengan X-UA.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

2 - Gunakan bootstrap.css non-minified, bukan bootstrap.min.css

<link href="/css/bootstrap.css" rel="stylesheet" />

3 - Tambahkan response.js (dan html5shiv.js)

<!--[if lt IE 9]>
  <script src="/js/html5shiv.min.js"></script>
  <script src="/js/respond.min.js"></script>
<![endif]-->

taruh respond.jsdi bagian bawah halaman tetapi sebelum bodytag penutup dan ini adalah tautan respond.jsdan jalankan kode ini di localhost Anda.

https://github.com/scottjehl/Respons

Untuk berjaga-jaga. Pastikan Anda memuat file js khusus IE setelah Anda memuat file css Anda.

Jangan lupa untuk menempatkan link css Anda di <head>saat respond.jsdibutuhkan hanya mereka.

Seperti yang dinyatakan sebelumnya ada dua masalah yang berbeda: 1) IE8 tidak mendukung permintaan media 2) response.js yang digunakan bersama dengan file css lintas-domain harus disertakan seperti yang dijelaskan sebelumnya.

Jika Anda ingin menggunakan BootstrapCDN, inilah contoh yang berfungsi:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!--[if lt IE 9]>
    <link href="https://stackoverflow.com//netdna.bootstrapcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
    <link href="img/ie/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/respond.proxy.js"></script>
<![endif]-->

Juga pastikan untuk menyalin response.proxy.gif, response.min.js dan response.proxy.js di direktori lokal

Setelah memverifikasi:

• DOCTYPE
• Tag meta yang kompatibel dengan X-UA
• Termasuk html5shiv.js dan response.js (dan mengunduh versi terbaru)
• response.js bersifat lokal
• Situs hosting dari server web dan bukan dari File: //
• Tidak menggunakan @import
• ...

Masih col-lg, col-md, dan col-sm tidak berfungsi. Akhirnya saya memindahkan referensi ke bootstrap menjadi sebelum referensi ke html5shiv.js dan response.js dan semuanya bekerja.

Berikut ini cuplikannya:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Bootstrap Test for IE8</title>

    <!-- Moved these two lines up --> 
    <link href="includes/css/bootstrap.css" type="text/css" rel="stylesheet" />
    <script src="includes/js/bootstrap.js"></script>

    <!--[if lt IE 9]>
      <script src="includes/js/html5shiv.js"></script>
      <script src="includes/js/respond.min.js"></script>
    <![endif]-->    
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4" style="background-color:red;">col-md-4</div>
            <div class="col-md-8" style="background-color:green;">col-md-8</div>
        </div>
    </div>
</body>
</html>

Dari penjelasan itu dikatakan bahwa IE8 adalah versi standar untuk Anda dan membuat content="IE=edge"akan membuat halaman dalam mode tertinggi. Untuk membuatnya kompatibel, ubah ke content="IE=8".

Mode IE8 mendukung banyak standar yang ditetapkan, termasuk Spesifikasi W3C Cascading Style Sheets Level 2.1 dan W3C Selectors API; itu juga menyediakan dukungan terbatas untuk Spesifikasi Level 3 W3C Cascading Style Sheets (Working Draft) dan standar yang muncul lainnya.

Mode Edge memberitahu Internet Explorer untuk menampilkan konten dalam mode tertinggi yang tersedia. Dengan Internet Explorer 9, ini setara dengan mode IE9. Jika rilis Internet Explorer di masa mendatang mendukung mode kompatibilitas yang lebih tinggi, halaman yang diatur ke mode tepi akan muncul dalam mode tertinggi yang didukung oleh versi itu. Halaman yang sama akan tetap muncul dalam mode IE9 bila dilihat dengan Internet Explorer 9.

Referensi Apa yang <meta http-equiv = "Kompatibel dengan X-UA" content = "IE = edge"> lakukan?

Perlu ditambahkan - <meta http-equiv="X-UA-Compatible" content="IE=edge">

Saya menggunakan Bootstrap 3 - memilikinya bekerja pada IE di lokal saya.

Saya membuatnya hidup tidak bekerja di IE.

Hanya Bootstrap yang tidak menyertakan baris kode dalam templatnya, saya tidak yakin mengapa, tetapi mungkin karena tidak kompatibel dengan W3C.

Saya memiliki perbaikan untuk masalah ini. Sebenarnya IE7 dan 8 tidak mendukung @ media dengan benar dan jika Anda memeriksa css untuk kelas “col-md- *” dan lebar di sana diberikan dalam lebar media 992px. Cukup buat file css baru IE misalnya: IE.css dan tambahkan komentar bersyarat. Dan kemudian salin kelas yang diperlukan untuk desain Anda secara langsung dengan pertanyaan media apa pun di sana dan Anda selesai.

Saya memiliki masalah yang persis sama ketika bermigrasi dari bootstrapv2 ke v3.

Jika (seperti saya) Anda bermigrasi dengan mengganti spanX lama dengan col-sm-X Anda juga perlu menambahkan kelas col-X. col-X adalah gaya yang berada di luar blok @ media mana pun yang berfungsi tanpa dukungan kueri media.

Untuk memperbaiki lebar kontainer, Anda dapat mengaturnya sendiri di luar blok @ media. Sesuatu seperti:

.container {
  max-width: @container-tablet;
}
@import "twitter-bootstrap/less/bootstrap";

Saya mengalami masalah yang sama di IE 10.0. Saya tahu ini bukan masalah di OP, tapi mungkin itu akan bermanfaat bagi orang lain.

Dalam kasus saya, saya memiliki garis kosong di awal dokumen:

[blank line]
<!DOCTYPE html>
<html lang="es">
...

Jika garis kosong antara DOCTYPE dan tag, masalahnya juga ditunjukkan:

<!DOCTYPE html>
[blank line]
<html lang="es">

Setelah saya menghapus baris kosong, dan tanpa sihir meta Kompatibel X-UA, IE 10 telah mulai membuat situs dengan benar.

Jika Anda menggunakan PHP dan Smarty berhati-hatilah dengan komentar Smarty Anda karena mereka akan menambahkan baris kosong yang bermasalah :-)

tag kepala saya seperti ini:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Bootstrap core CSS -->
    <link href="css/modern-business.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/modern-business.js"></script>
     <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.js"></script>
    <![endif]-->  
</head>

jika Anda ingin mencoba di lokal ... coba melalui localhost, atau buat server QA dan atur konten dan coba.

Kita perlu response.js untuk bootstrap 3 dan itu tidak akan bekerja di mesin lokal jika kita hanya memasukkannya di js dan menambahkannya ke html di header. Itu akan mengatakan akses ditolak. ini hanya berfungsi melalui server karena IE memiliki batasan keamanan. : P

Saya sudah membaca setiap komentar di sini, mencoba semuanya .. tetapi tidak bisa berfungsi dengan Windows 7 - Internet Explorer 11 ( dengan mode dokumen: IE8 ).

Kemudian terlintas dalam pikiran bahwa menjalankan mode dokumen (IE8) tidak sama dengan IE8 yang asli, jadi saya menginstal Windows Virtual PC ( Windows 7 dengan Internet Explorer 8 ) dan tadaaaa ... berfungsi seperti pesona!

Saya telah meletakkan kode ini HANYA di bagian bawah halaman untuk membuatnya berfungsi:

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</body>
</html>

Sama seperti kepala. Saya memiliki masalah yang sama dan tidak ada yang diperbaiki untuk saya. Akhirnya saya mengetahui bahwa response.js tidak mem-parsing CSS yang dirujuk melalui @import . Saya memiliki seluruh bootstrap.min.cssimpor melalui @importke saya main.css.

Jadi, pastikan Anda tidak memiliki CSS yang berisi kueri media yang dirujuk melalui @import .

Saya telah menyelesaikan langkah-langkah di bawah ini.

(1) memasang modul Respond.js untuk drupal 7. (2) modul lessphp untuk drupal 7 diatur di perpustakaan, alih-alih folder modul. (3) (3.1)<meta http-equiv="X-UA-Compatible" content="IE=edge">

(3.2)

<!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
<![endif]-->  

menggunakan cdn bootstrap dari pengaturan tema.

Untuk mempelajari lebih lanjut, tinjau blog situs web saya untuk desain dan pengembangan drupal www.devangsolanki.com

Jika Anda menggunakan Bootstrap 3 dan semuanya berfungsi dengan baik di browser lain kecuali IE, coba di bawah ini.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

Gunakan solusi ini

<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />
<![endif]-->

String ini <script src="js/css3-mediaqueries.js"></script>mengaktifkan permintaan media. String ini <link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />mengaktifkan font bootstrap.

Diuji pada Bootstrap 3.3.5

Tautan untuk mengunduh mediaqieries.js . Tautan untuk mengunduh bootstrap-ie7.css

Pastikan Anda menautkan sumber bootstrap secara terpisah

Jika Anda menggunakan LESSatau SASStidak untuk serakah dengan mengkompilasi gaya. Dalam proyek saya, saya termasuk bootstrap.min.cssdalam gaya utama saya, di bagian atas file - jadi seharusnya hanya ada satu permintaan untuk semua gaya.

Dan karena itu, kelas boostrap tidak berfungsi dengan baik. Ketika ditambahkan secara terpisah, berfungsi seperti yang diharapkan.

Saya menghadapi masalah yang sama, mencoba jawaban pertama tetapi ada sesuatu yang hilang.

Jika Anda menggunakan Webpack, css Anda akan dimuat sebagai tag gaya yang tidak didukung oleh response.js, itu membutuhkan file, jadi pastikan bootstrap dimuat sebagai file css

Secara pribadi saya menggunakan extract-text-webpack-plugin

const webpack = require("webpack")
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const path = require("path")

module.exports = {
    context: __dirname+"/src",
    entry: "./index.js",
    output: {
        filename: "./dist/bundle.js",
        path: __dirname
    },
    plugins: [
        ...,
        new ExtractTextPlugin("./dist/bootstrap.css", {
            allChunks: true
        })
    ],
    module: {
        loaders: [
            ...,
            // your css loader excluding bootstrap
            {
                test: /\.css$/,
                loader: "style!css",
                exclude: [
                    path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
                ]
            },

            {
                // loads bootstrap as a file, change path accordingly if needs be, path needs to be absolute
                include: [
                    path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
                ],
                loader: ExtractTextPlugin.extract("style-loader", "css-loader?minimize")
            }
        ]
    }
}

Semoga ini bisa membantu Anda