【问题标题】：webpack2: how to import Bootstrap CSS for react-bootstrap to find its styles?webpack2：如何为 react-bootstrap 导入 Bootstrap CSS 以找到它的样式？
【发布时间】：2017-07-15 04:08:41
【问题描述】：

我在我的项目中使用 webpack 2 和 react-bootstrap ；我找不到如何正确应用引导 CSS 样式，似乎没有加载 .css 文件，无论我尝试使用哪个 import 语句。

据我了解，我不需要带有 javascript 等的完整引导程序包，因为我使用的是 react-bootstrap ；我只需要CSS。所以我在我的main.js 文件中添加了这个：

import 'bootstrap/dist/css/bootstrap.css';

它似乎可以工作（没有错误消息），但没有应用样式...

我按照 webpack 2 文档中的描述在我的 webpack 配置文件中配置了 css 加载器。

任何帮助将不胜感激:)

【问题讨论】：

您是否在css-loader 中设置了选项modules: true？这将使css在本地范围内。如果您发布您的 webpack 配置会很好，文档中有许多不同的配置。
@MichaelJungo 非常感谢！！！就是这样 :) 我从 webpack2 网页复制了配置，并且确实有 modules: true... 如果我可以决定是否要在模块中限定 CSS 规则而不是有一个全局选项，我会很高兴知道吗？
@MichaelJungo 如果您发送一个答案，我很乐意为您投票：)

标签： css twitter-bootstrap webpack react-bootstrap webpack-2

【解决方案1】：

在css-loader 中设置modules: true 时，CSS 默认为本地范围，但您需要它们在全局范围内可用。最简单的解决方案是完全删除modules: true。您仍然可以通过 :local 在自己的 CSS 文件中使用模块。

但如果您想使用模块，有一些解决方法可以导入全局变量。

定义单独的规则

您可以制定两条不同的规则来匹配所需文件，而不是为所有 CSS 文件启用模块。因此，假设所有来自 node_modules 的 CSS 导入都应视为常规（全局）CSS。规则如下所示：

{
  // For all .css files except from node_modules
  test: /\.css$/,
  exclude: /node_modules/,
  use: [
    'style-loader',
    { loader: 'css-loader', options: { modules: true } }
  ]
},
{
  // For all .css files in node_modules
  test: /\.css$/,
  include: /node_modules/,
  use: ['style-loader', 'css-loader']
}

当然，如果您不想要整个 node_modules，您可以更具体地指定要包含/排除的内容。

内联指定加载器

您可以在import 中指定加载器，webpack 将使用那些配置的加载器。您将按如下方式导入引导程序：

import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css';

这只是一种无需更改任何配置的快速解决方法，但可能并不理想，尤其是在有多个此类情况时。

【讨论】：

非常感谢您的详细解释