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

当在 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。

，您可以更具体地说明您想要什么 include/exclude

内联指定加载程序

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

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

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

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

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

css

twitter-bootstrap

webpack

react-bootstrap

webpack-2

定义单独的规则

内联指定加载程序