Webpack 2 CSS 模块支持
Webpack 2 CSS Modules support
现在我正在将我当前的项目从 Webpack 1
转移到 Webpack 2
,我遇到了一些以前工作正常的 css 模块的问题。特别是,我使用 css-loader
和 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
文档中也提到了:
Note: For prerendering with extract-text-webpack-plugin you should
use css-loader/locals instead of style-loader!css-loader in the
prerendering bundle. It doesn't embed CSS but only exports the
identifier mappings.
所以我尝试了 loader: 'css-loader/locals' 并将其添加到选项中,但不幸的是,没有任何效果。
我也尝试用 postcss postcss-modules
插件解决这个问题。它修复了构建,但是当我尝试启动我的应用程序时,它似乎没有适当导入 css 名称映射。
以防将来有人遇到同样的问题。对于此版本的 ExtractTextPlugin (2.0.0-beta.4),您应该以 Webpack-1 方式设置加载器参数。具体来说:
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: [
'css-loader?modules&importLoaders=1&localIdentName=[hash:base64:5]',
'postcss-loader'
]
}),
适合我
现在我正在将我当前的项目从 Webpack 1
转移到 Webpack 2
,我遇到了一些以前工作正常的 css 模块的问题。特别是,我使用 css-loader
和 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
文档中也提到了:
Note: For prerendering with extract-text-webpack-plugin you should use css-loader/locals instead of style-loader!css-loader in the prerendering bundle. It doesn't embed CSS but only exports the identifier mappings.
所以我尝试了 loader: 'css-loader/locals' 并将其添加到选项中,但不幸的是,没有任何效果。
我也尝试用 postcss postcss-modules
插件解决这个问题。它修复了构建,但是当我尝试启动我的应用程序时,它似乎没有适当导入 css 名称映射。
以防将来有人遇到同样的问题。对于此版本的 ExtractTextPlugin (2.0.0-beta.4),您应该以 Webpack-1 方式设置加载器参数。具体来说:
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: [
'css-loader?modules&importLoaders=1&localIdentName=[hash:base64:5]',
'postcss-loader'
]
}),
适合我