现在我正在将我当前的项目从Webpack 1
to移动Webpack 2
,我遇到了一些以前运行良好的 css 模块问题。特别是,我使用css-loader
and react-css-modules
。我目前的开发配置如下:
test: /module\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
'postcss-loader'
]
它工作正常。对于生产,我使用ExtractTextPlugin
(版本 2.0.0-beta.4),我的 Webpack 配置是这样的:
test: /module\.css$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: [
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[hash:base64:5]'
}
},
'postcss-loader'
]
}),
在这种情况下,构建失败并出现以下错误:
Module build failed: Error: composition is only allowed
when selector is single :local class name
所以它似乎没有预先添加本地前缀。文档中也提到了css-loader
:
注意:对于使用 extract-text-webpack-plugin 进行预渲染,您应该在预渲染包中使用 css-loader/locals 而不是 style-loader!css-loader。它不嵌入 CSS,只导出标识符映射。
所以我尝试了 loader: 'css-loader/locals' 并将其添加到选项中,但不幸的是,没有任何效果。
我也尝试用 postcsspostcss-modules
插件解决这个问题。它修复了构建,但是当我尝试启动我的应用程序时,它看起来没有适当的 css 名称映射导入。