css - webpack2 : how to import Bootstrap CSS for react-bootstrap to find its styles?

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

在 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 将使用那些配置的加载器。您将按如下方式导入 Bootstrap :

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

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