无法在JSX中正确加载CSS

时间:2016-12-08 13:56:41

标签: css webpack

我已经使用3个加载器,babel,css和文件配置了我的webpack配置

一切正常,我可以在JSX文件中导入我自己创建的CSS文件,它被ExtractTextPlugin捆绑得很好!

我的问题是,对于第三方模块,例如bootstrap,我无法轻松导入CSS。

import "./style/app.css" //works
import "bootstrap/dist/css/bootstrap.min.css" //crashes
import "css-loader!bootstrap/dist/css/bootstrap.min.css" //works

为什么对于第三方模块,它没有识别我的加载程序配置?由于这个原因,它没有被ExtractTextPlugin导出。

如果我尝试在app.css中导入如下:

@import url("~bootstrap/dist/css/bootstrap.min.css")

这样就可以通过装载机正确导入。

另一个细节是,bootstrap css加载了一些额外的字体。如果我通过@import导入文件加载器按预期触发!

但是,如果我尝试使用css-loader!在JSX中,它的工作原理部分是因为它导入了CSS而无法处理字体,所以文件加载器没有被触发!

1 个答案:

答案 0 :(得分:0)

我能够找到解决方案!

问题出现在加载器中,我忘了添加指向node_modules的include属性!