Twitter Bootstrap 3的IE8问题


228

我正在使用新的Twitter Bootstrap创建网站。该网站看起来不错,并且可以在除IE8之外的所有必需浏览器中使用。

在IE8中,它似乎在显示移动版本的元素,但延伸到了桌面的全屏。我相信我遇到的问题是Twitter引导程序首先是移动设备。因此出于某些原因,IE8会选择此选项。

我还注意到,container该类似乎并未按预期引入max-width CSS属性。谁能看到我做错了什么?

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

1
欢迎。请也将代码发布在问题中。当您的链接不再工作时,这将有助于以后几年中关注此问题的任何人。
Mark Chorley

1
谢谢!我已经编辑好了,加油。
wrayvon 2013年

Answers:


260

您从CDN(bootstrapcdn.com)获得了CSS,response.js仅适用于本地文件。因此,请使用bootstrap.css的本地副本在IE8上尝试您的网站。或阅读: CDN / X域设置

注意另请参见:https : //github.com/scottjehl/Respond/pull/206

更新:

请阅读:http : //getbootstrap.com/getting-started/#support

另外,Internet Explorer 8需要使用response.js来启用媒体查询支持。

另请参阅:https : //github.com/scottjehl/Respond

因此,基本模板的头部包含以下几行:

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

如果我很钝,请原谅我...但是respond.js
克里斯·肯本

6
抱歉,发布荒谬的问题,我似乎总能找到合适的解决方案...请查看getbootstrap.com/getting-started(特别是在“ Internet Explorer 8和9”部分下)。:)
克里斯·肯本

1
哪些文件应该在本地存在,哪些文件可以从CDN使用?bootsrap.css,bootstrap.js,response.js,html5shiv.js文件?
trante

3
本地response.js仅适用于引导程序(相同域)的本地副本,请参见此处github.com/scottjehl/Respond#cdnx-domain-setup
Bass Jobsen 2013年

6
另请注意,需要在包含媒体查询的css文件之后定义Respond.js。否则,它们将不会在IE8中进行处理
helios456

62

我还必须设置以下META标签:

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

我正在使用:<div class="left-finger-picker img-responsive">来显示图像,其中:left-finger-picker如下:.left-finger-picker { width: 200px; height: 210px; position : relative; background-size: cover; background-image : url("../myPics/leftHand.png"); background-repeat: no-repeat; background-size: contain; } 但是,它在IE8中没有响应
Hosein Aqajani

17

从Bootstrap 2过渡到3时,我也遇到了同样的问题。我已经获得了response.js和html5shiv.js并将我的meta设置为edge。我错过了导航栏类型从2更改为3的情况。在Bootstrap 2中,它是导航。在Bootstrap 3中,它现在是标题。因此,要完全解决问题,我必须

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

在加载CSS之后,请输入以下内容:

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

然后改变

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

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

哦,好吧,我还加了

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

仅仅是因为这就是Bootstrap网站本身所拥有的。


我正在使用:<div class="left-finger-picker img-responsive">显示以下图像:其中left-finger-picker如下:.left-finger-picker { width: 200px; height: 210px; position : relative; background-size: cover; background-image : url("../myPics/leftHand.png"); background-repeat: no-repeat; background-size: contain; } 但是,它在IE8中没有响应
Hosein Aqajani

14

就我而言,引导程序最小化的CSS导致了问题。为了使Bootstrap 3.0.2在IE8中响应(使用F12开发人员工具模拟),我必须:

1-设置X-UA兼容标志。

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

2-使用非最小的bootstrap.css,而不是bootstrap.min.css

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

3-添加response.js(和html5shiv.js)

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

同样在我的情况下,引导程序最小化的CSS导致了IE8中的问题。
hrvoj3e 2014年

我使用:<div class="left-finger-picker img-responsive">显示的图像,其中:left-finger-picker如下:.left-finger-picker { width: 200px; height: 210px; position : relative; background-size: cover; background-image : url("../myPics/leftHand.png"); background-repeat: no-repeat; background-size: contain; } 但是,它不响应在IE8
Hosein Aqajani


6

以防万一。加载css文件后,请确保加载IE特定的js文件。



5

如前所述,存在两个不同的问题:1)IE8不支持媒体查询2)与跨域CSS文件结合使用的response.js必须如前所述。

如果您想使用BootstrapCDN,请使用以下示例:

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

还要确保在本地目录中复制response.proxy.gif,response.min.js和response.proxy.js


4

验证后:

  • DOCTYPE
  • X-UA兼容的元标记
  • 包含html5shiv.js和response.js(并下载最新版本)
  • 本地的response.js
  • 来自Web服务器而不是File://的托管站点
  • 不使用@import
  • ...

col-lg,col-md和col-sm仍然无法正常工作。最后,我将对bootstrap的引用移到了对html5shiv.js和response.js的引用之前,并且所有这些都起作用。

这是一个片段:

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

2
要解决我的问题,请按照此处的建议移动bootstrap.min.css。我只移动了.css文件,之后仍然加载了.js仍然文件。
乍得·麦格拉思

将我编译的CSS文件(包括Bootstrap)移动到html5shim上方并响应是我的解决方案-谢谢
友好的代码

2

从说明中可以看出,IE8是您的标准版本,并且content="IE=edge"将以最高模式呈现页面。为了使其兼容,请将其更改为content="IE=8"

IE8模式支持许多已建立的标准,包括W3C级联样式表2.1规范和W3C选择器API。它还为W3C级联样式表3级规范(工作草案)和其他新兴标准提供了有限的支持。

边缘模式告诉Internet Explorer以可用的最高模式显示内容。使用Internet Explorer 9,这等效于IE9模式。如果将来的Internet Explorer版本支持更高的兼容性模式,则设置为边缘模式的页面将以该版本支持的最高模式显示。当使用Internet Explorer 9查看时,这些相同的页面仍将以IE9模式显示。

参考<meta http-equiv =“ X-UA-Compatible” content =“ IE = edge”>是做什么的?


1

需要添加- <meta http-equiv="X-UA-Compatible" content="IE=edge">

我正在使用Bootstrap 3-在我的本地IE上运行它。

我把它直播在IE中不起作用。

只是Bootstrap在他们的模板中没有包含那行代码,我不确定为什么,但这可能是由于它与W3C不兼容。


1

我已解决此问题。实际上,IE7和8不正确支持@media,如果您检查css中的“ col-md- *”类,则宽度为992px。只需创建一个新的CSS文件IE,例如:IE.css并添加条件注释。然后,直接使用那里的任何媒体查询直接复制设计所需的类,即可完成。


0

从bootstrapv2迁移到v3时,我遇到了完全相同的问题。

如果(像我一样)通过用col-sm-X替换旧的spanX进行迁移,则还需要添加col-X类。col-X是任何@media块之外的样式,因此它们无需媒体查询支持即可工作。

要固定容器的宽度,您可以在@media块之外自行设置。就像是:

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

好的,因此发现并不能100%解决此问题,因为col-X类随后用于移动设备。回到画板上……
andyberry88

col-X类永远不会堆叠,因此您的解决方案在小型设备上会出现问题。您的解决方案也无法解决@ grid-float-breakpoint的问题,该问题也取决于媒体查询,因此导航栏不会变得水平。另请参阅:stackoverflow.com/a/17920693/1596547
Bass Jobsen

0

我在IE 10.0中遇到了同样的问题。我知道这并不是OP中的问题,但也许对其他人有用。

就我而言,我在文档的开头有一个空行:

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

如果空白行位于DOCTYPE和标签之间,则还会显示问题:

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

一旦我删除了空白行,并且没有神奇的X-UA-Compatible元,IE 10就开始正确渲染该网站。

如果您使用的是PHP和Smarty,请注意Smarty注释,因为它们会添加那些有问题的空白行:-)


0

我的头部标签是这样的:

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

如果您想在本地尝试...通过本地主机尝试,或创建一个质量检查服务器并设置内容并尝试。

我们需要bootstrap 3的response.js,如果仅将其放入js并将其附加到标头中的html,它将无法在本地计算机上工作。它将说访问被拒绝。它仅通过服务器工作,因为IE具有安全限制。:P


0

我在这里阅读了所有评论,尝试了所有内容..但无法使其在Windows 7-Internet Explorer 11中正常工作(文档模式为IE8)下工作。

然后它来到介意运行的文件模式(IE8)是不一样的真正的IE8,所以我安装的Windows Virtual PCWindows 7中的Internet Explorer 8)和tadaaaa ... 它的工作原理就像一个魅力!

我将这段代码仅放在页面底部以使其工作:

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

Respond.js和代理文件也托管在cdnjs.cloudflare.com上。请查看 cdnjs.com/libraries/respond.js中的文档/链接,并在此托管bootstrap 3.03:cdnjs.com/libraries/twitter-bootstrap
Troy Morehouse

0

只是抬起头来。我有同样的问题,以上都不适合我。最终,我发现response.js无法解析通过@import引用的CSS 。我整过bootstrap.min.css通过进口@import进入我的main.css

因此,请确保您没有任何包含通过@import引用的媒体查询的CSS 。


0

我已解决以下步骤。

(1)为drupal 7安装了Respond.js模块。(2)在库中而不是module文件夹中设置了drupal 7的lessphp模块。(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]-->  

从主题设置使用CDN引导程序。

要了解更多信息,请查看我的网站博客以进行Drupal设计和开发www.devangsolanki.com


1
步骤1和步骤2与问题有什么关系?问题出在IE8和引导程序上。问题中甚至没有提到Drupal。
亚当·祖克曼

0

如果您使用Bootstrap 3,并且在IE以外的其他浏览器上都能正常运行,请尝试以下操作。

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

嗨,Phill Healy,我发布的解决方案很适合我。您的评论不是建设性的。如果您需要帮助,则必须提供更多详细信息
vutbao

1
@vutbao bootstrap在> IE8的版本上有效。如果您希望它在IE8中正常运行,则需要添加responsejs,但如果您使用的是引导CDN,则repondjs将不起作用。花时间阅读巴斯·乔布森的答案。
Wreeecks

@Vutbao,要说您的答案是对所有具有此类性质的Bootstrap 3问题的明确答案。但这就是您的回答。正如bwaaaaaa指出的那样,有很多问题需要考虑。例如可能是该文件的另一个问题是在特殊模式等
菲尔·希利

点了。我会更谨慎地措辞。谢谢
vutbao

0

使用此解决方案

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

此字符串<script src="js/css3-mediaqueries.js"></script>启用媒体查询。这个字符串<link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />启用引导字体。

在Bootstrap 3.3.5上测试

链接下载 mediaqieries.js。链接下载 bootstrap-ie7.css


0

确保分别链接引导源

如果您使用LESSSASS不想贪图样式。在我的项目中,我包括了bootstrap.min.css,我的主要样式在文件的顶部,因此所有样式都应该只有一个请求。

因此,boostrap类无法正常工作。当单独添加时,将按预期工作。


0

我遇到了同样的问题,尝试了第一个答案,但是缺少了一些东西。

如果您使用的是Webpack,则您的CSS将作为response.js不支持的样式标签加载,它需要一个文件,因此请确保引导程序作为CSS文件加载

我个人使用过 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")
            }
        ]
    }
}

希望对您有帮助

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.