Problem z IE8 z Twitter Bootstrap 3

Tworzę witrynę przy użyciu nowego Twitter Bootstrap. Strona wygląda dobrze i działa we wszystkich wymaganych przeglądarkach oprócz IE8.

W IE8 wydaje się, że wyświetla elementy wersji mobilnej, ale rozciąga się na pełnym ekranie mojego pulpitu. Uważam, że mam problem z tym, że najpierw bootstrap na Twitterze jest mobilny. Z jakiegoś powodu IE8 wybiera tę opcję.

Zauważam również, że containerklasa nie wydaje się pobierać właściwości CSS o maksymalnej szerokości zgodnie z przeznaczeniem. Czy ktoś może zobaczyć, co zrobiłem źle?

<!-- 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>

Otrzymałeś swój CSS z CDN (bootstrapcdn.com) respond.js działa tylko dla plików lokalnych. Więc wypróbuj swoją stronę na IE8 z lokalną kopią bootstrap.css. Lub przeczytaj: Konfiguracja CDN / X-Domain

Uwaga Zobacz także: https://github.com/scottjehl/Respond/pull/206

Aktualizacja:

Proszę przeczytać: http://getbootstrap.com/getting-started/#support

Ponadto program Internet Explorer 8 wymaga użycia pliku answer.js, aby włączyć obsługę zapytań o media.

Zobacz także: https://github.com/scottjehl/Respond

Z tego powodu podstawowy szablon zawiera następujące wiersze w sekcji nagłówka:

<!-- 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]-->

Musiałem także ustawić następujący tag META:

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

Miałem ten sam problem podczas przechodzenia z Bootstrap 2 do 3. Już dostałem respond.js i html5shiv.js i ustawiłem meta na edge. Przegapiłem, że z 2 do 3 zmienił się typ elementu paska nawigacyjnego. W Bootstrap 2 była to nawigacja. W Bootstrap 3 jest teraz nagłówkiem. Aby w pełni rozwiązać problem, musiałem

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

Umieść to zaraz po załadowaniu mojego css:

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

a następnie zmienić

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

do

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

Aha i dla pewności dodałem również

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

po prostu dlatego, że to właśnie ma sama strona Bootstrap.

W moim przypadku przyczyną problemu był zminimalizowany CSS bootstrap. Aby bootstrap 3.0.2 był responsywny w IE8 (emulowany za pomocą F12 Developer Tools) musiałem:

1 - Ustaw flagę zgodną z X-UA.

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

2 - Użyj niezminimalizowanego bootstrap.css, zamiast bootstrap.min.css

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

3 - Dodaj plik answer.js (i html5shiv.js)

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

umieść respond.jsna dole strony, ale przed zamknięciem bodytagu, a tutaj jest link respond.jsi uruchom ten kod na swoim lokalnym serwerze.

https://github.com/scottjehl/Respond

W razie czego. Upewnij się, że załadowałeś pliki js specyficzne dla IE po załadowaniu plików css.

Nie zapomnij umieścić swoich linków css w <head>as respond.jsbierze tylko te.

Jak już wcześniej wspomniano, istnieją dwa różne problemy: 1) IE8 nie obsługuje zapytań o media 2) Odpowiedź.js używana w połączeniu z plikami css między domenami musi zostać dołączona jak opisano wcześniej.

Jeśli chcesz użyć BootstrapCDN, oto działający przykład:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!--[if lt IE 9]>
    <link href="https://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]-->

Upewnij się także, że skopiowałeś respond.proxy.gif, answer.min.js i response.proxy.js w lokalnych katalogach

Po weryfikacji:

• DOCTYPE
• Metatag zgodny z X-UA
• Uwzględnienie html5shiv.js i respond.js (oraz pobieranie najnowszych wersji)
• Odpowiedź.js jest lokalna
• Witryna hostowana z serwera WWW, a nie z pliku: //
• Nie używa @import
• ...

Nadal col-lg, col-md i col-sm nie działały. W końcu przeniosłem referencje na bootstrap, aby były przed referencjami do html5shiv.js i answer.js i wszystko działało.

Oto fragment:

<!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>

Z wyjaśnienia wynika, że ​​IE8 jest standardową wersją dla ciebie, a wykonanie content="IE=edge"spowoduje, że strona będzie wyświetlana w najwyższym trybie. Aby był kompatybilny, zmień na content="IE=8".

Tryb IE8 obsługuje wiele ustalonych standardów, w tym specyfikację kaskadowych arkuszy stylów W3C poziomu 2.1 oraz interfejs API Selektorów W3C; zapewnia także ograniczoną obsługę specyfikacji kaskadowych arkuszy stylów W3C poziomu 3 (robocza wersja robocza) i innych nowych standardów.

Tryb krawędzi informuje program Internet Explorer, aby wyświetlał zawartość w najwyższym dostępnym trybie. W przypadku przeglądarki Internet Explorer 9 jest to odpowiednik trybu IE9. Jeśli w przyszłej wersji programu Internet Explorer obsługiwany będzie tryb wyższej zgodności, strony ustawione na tryb krawędzi pojawią się w trybie najwyższym obsługiwanym przez tę wersję. Te same strony nadal pojawiałyby się w trybie IE9 podczas przeglądania w Internet Explorerze 9.

Odwołanie Co robi <meta http-equiv = "X-UA-Compatible" content = "IE = edge">?

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

Używałem Bootstrap 3 - działał w IE na moim komputerze lokalnym.

Podałem, że na żywo nie działa w IE.

Po prostu Bootstrap nie zawiera tej linii kodu w swoich szablonach, nie jestem pewien dlaczego, ale może to być spowodowane tym, że nie jest kompatybilny z W3C.

Mam naprawę tego problemu. W rzeczywistości IE7 i 8 nie obsługują poprawnie @media i jeśli sprawdzisz css dla klas „col-md- *”, a szerokość jest podana w szerokości mediów 992px. Wystarczy utworzyć nowy plik css IE, np .: IE.css i dodać komentarze warunkowe. A następnie po prostu skopiuj klasy wymagane dla twojego projektu bezpośrednio z wszelkimi zapytaniami o media i gotowe.

Miałem dokładnie ten sam problem podczas migracji z bootstrapv2 do v3.

Jeśli (podobnie jak ja) przeprowadziłeś migrację, zastępując stary spanX kol-sm-X, musisz również dodać klasy col-X. col-X to style, które znajdują się poza blokami @media, więc działają bez obsługi zapytań o media.

Aby naprawić szerokość pojemnika, możesz ustawić go samodzielnie poza blokiem @media. Coś jak:

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

Mam ten sam problem w IE 10.0. Wiem, że nie jest to dokładnie problem w PO, ale być może przyda się innym.

W moim przypadku na początku dokumentu był pusty wiersz:

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

Jeśli pusta linia znajduje się między DOCTYPE a tagiem, problem jest również wyświetlany:

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

Po usunięciu pustej linii i bez magicznej meta kompatybilnej z X-UA, IE 10 zaczął poprawnie renderować stronę.

Jeśli używasz PHP i Smarty, uważaj na komentarze Smarty, ponieważ dodadzą one te problematyczne puste wiersze :-)

mój tag głowy jest taki:

<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>

jeśli chcesz spróbować w lokalnym ... spróbuj przez localhost lub utwórz serwer kontroli jakości i ustaw zawartość i spróbuj.

Potrzebujemy answer.js dla bootstrap 3 i nie będzie działał na komputerze lokalnym, jeśli po prostu umieścimy go w js i dołączymy do html w nagłówku. Powie, że odmowa dostępu. działa tylko przez serwer, ponieważ IE ma ograniczenia bezpieczeństwa. : P

Przeczytałem tutaj każdy komentarz, próbowałem wszystkiego ... ale nie mogłem go uruchomić z Windows 7 - Internet Explorer 11 ( z trybem dokumentu: IE8 ).

Potem przyszło mi do głowy, że tryb dokumentu (IE8) to nie to samo, co prawdziwy IE8, więc zainstalowałem Windows Virtual PC ( Windows 7 z Internet Explorer 8 ) i tadaaaa ... to działa jak urok!

Umieściłem ten fragment kodu JUST na dole strony, aby działał:

<!-- 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>

Tak jak heads up. Miałem ten sam problem i żadne z powyższych nie rozwiązało go dla mnie. W końcu dowiedziałem się, że respond.js nie analizuje CSS, do którego odwołuje się @import . Całość została bootstrap.min.csszaimportowana @importdo mojegomain.css .

Upewnij się więc, że nie masz CSS, który zawiera zapytania o media, do których odwołuje się @import .

Rozwiązałem poniższe kroki.

(1) zainstalował moduł Respond.js dla drupal 7. (2) moduł lessphp dla drupal 7 ustawiony w bibliotekach zamiast w folderze modułów. (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]-->  

używając cdn bootstrap z ustawień motywu.

Aby dowiedzieć się więcej, przejrzyj mój blog na stronie poświęconej projektowaniu i rozwojowi drupal www.devangsolanki.com

Jeśli używasz Bootstrap 3 i wszystko działa dobrze w innych przeglądarkach oprócz IE, wypróbuj poniższe.

<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]-->

Skorzystaj z tego rozwiązania

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

Ten ciąg <script src="js/css3-mediaqueries.js"></script>włącza zapytania multimedialne. Ten ciąg<link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" /> włącza czcionki rozruchowe.

Testowane na Bootstrap 3.3.5

Link do pobrania mediaqieries.js . Link do pobrania bootstrap-ie7.css

Pamiętaj, aby połączyć źródło ładowania początkowego osobno

Jeśli używasz LESSlub SASSnie masz ochoty na kompilowanie stylów. Do mojego projektu włączyłembootstrap.min.css w głównym stylu na górze pliku - więc powinno być tylko jedno żądanie dla wszystkich stylów.

Z tego powodu klasy boostrap nie działały poprawnie. Po dodaniu osobno działa zgodnie z oczekiwaniami.

Napotkałem ten sam problem, wypróbowałem pierwszą odpowiedź, ale czegoś mi brakowało.

Jeśli używacie Webpacka, wasz css zostanie załadowany jako znacznik stylu, który nie jest obsługiwany przez respond.js, potrzebuje pliku, więc upewnij się, że bootstrap jest załadowany jako plik css

Osobiście korzystałem 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")
            }
        ]
    }
}

Mam nadzieję, że ci to pomoże