我在我的项目中使用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加载器.
任何帮助,将不胜感激 ：)
解决方法
在css-loader中设置modules：true时,默认情况下CSS是本地作用域,但您需要它们全局可用.最简单的解决方案是删除模块：完全是真的.您仍然可以使用
: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,那么您可以更加具体地包含/排除.
指定内联加载器
您可以在导入中指定加载器,webpack将使用超过已配置的加载器.您将导入bootstrap,如下所示：
import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css';