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 2文档中的描述在我的webpack配置文件中配置了css加载器.

任何帮助,将不胜感激 :)

Answer 1

在设置modules: true时css-loader,默认情况下CSS是本地作用域,但您需要它们全局可用.最简单的解决方案是modules: true完全删除.您仍然可以使用:local在您自己的CSS文件中使用模块.

但是如果你想使用模块,有一些变通方法来导入全局变量.

定义单独的规则

您可以制作两个与所需文件匹配的不同规则,而不是为所有CSS文件启用模块.因此,假设所有CSS导入node_modules应该被视为常规(全局)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';

这只是一个快速的解决方法,无需更改任何配置,但它可能是不可取的,尤其是当有多个这样的情况时.