css - webpack2: 如何导入 Bootstrap CSS以响应 Bootstrap 以查找它的样式?

  显示原文与译文双语对照的内容
107 3

在我的项目中使用webpack并react引导bootstrap我找不到CSS样式,看起来像. css 文件没有装入,无论我尝试使用哪一个 import 语句。

我理解,我不需要使用的完整 Bootstrap 包,因为我使用的是React引导;我只需要 CSS 。所以我在 main.js file: 中添加了这个

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

它似乎工作在( 无错误消息),但样式没有应用。

我在 web pack配置文件中配置了css加载程序,如 web pack 2文档所描述。

任何帮助都是值得感激的:

时间:原作者:0个回答

101 4

css-loader 中设置 modules: true 时,默认情况下,CSS是本地作用域,但是你需要它们在全局范围内可用。最简单的解决方案是完全删除 modules: true你仍然可以使用 : 本地代码在你自己的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,那么你可以更具体地在你想要包含/排除的内容中。

指定加载程序 inline

你可以在 import 中指定加载器,web service将使用配置过的加载程序。你将按如下方式导入 Bootstrap:

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

这只是一个快速的解决方案,不需要更改任何配置,但是这可以能不是不理想的。

原作者:
...