我遇到一个很奇怪的问题,即我创建的任何新CSS文件和import
JS代码中的任何CSS文件都未添加到输出文件中。我的webpack配置设置为将React组件所需的所有CSS文件捆绑到一个名为的输出文件中styles.css
。这是我的配置的相关部分:
module.exports = {
...
module: {
rules: [
...
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader?modules=true&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'],
})
},
...
],
},
...
plugins: [
...
new ExtractTextPlugin('css/styles.css'),
...
],
};
此配置创建一个名为的文件styles.css
,并将其css
放在我的输出目录中的一个目录中。
这是一个很奇怪的部分:它当前为我的代码中导入的所有文件生成散列的类名,但忽略了某些文件的类定义(在一致的基础上)。
我正在使用这些版本的软件包:
"css-loader": "^0.28.4",
"postcss-loader": "^2.0.6",
"style-loader": "^0.18.2",
"webpack": "^2.6.1",
我什至尝试更新所有软件包,但问题仍然存在。
我尝试在生产和开发模式下的三台不同机器上运行webpack,并始终获得相同的结果。
有任何想法吗?我在这里想念什么吗?
我实际上找到了一个答案:我在Webpack中使用块作为单独的入口点,但是(很粗心)重写了同一CSS文件,而没有考虑不同入口点的不同需求。到目前为止,我对所有条目块都使用了几乎相同的CSS规则,这就是为什么我以前没有看到这一点。
天哪!
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句