webpack2：如何导入bootstrap CSS for react-bootstrap来查找它的样式？

Question

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

据我所知，我不需要使用javascript等完整的bootstrap包，因为我使用的是react-bootstrap;我只需要CSS。所以我在main.js文件中添加了这个：

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

它似乎有用（没有错误信息），但样式没有应用......

我在webpack配置文件中配置了css loader，如webpack 2文档中所述。

任何帮助将不胜感激：）

Answer 1

在modules: true中设置css-loader时，默认情况下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将使用超过已配置加载器的加载器。您可以按如下方式导入bootstrap：

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

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