问题
我正在尝试在我的React项目中使用babel-plugin-react-css-modules以获得更好的性能,而不是 React CSS Modules 。
但是,样式未正确应用。
原因
<style>
标签中的版本包含了奇怪的夸张,例如:
<style>
代码中:-components-Foo-___Foo__foo___1fcIZ-
components-Foo-___Foo__foo___1fcIZ
即使我们使用相同的
localIdentName
,生成的结果也是如此 与DOM元素上的css和className中的选择器不同。(注意:在babel-plugin-react-css-modules中,
localIdentName
是[path]___[name]__[local]___[hash:base64:5]
已编码为硬编码options.generateScopedName
)
知道为什么有一个超级包装?
答案 0 :(得分:3)
经过一番挣扎后,我自己找到了解决方案。
这是由于css-loader
的怪癖:如果localIdentName
选项周围有双引号,它会用生成的连字符包装生成的类名。
所以不要在webpack配置中执行此操作:
{
test: /\.(scss|sass)$/,
use: [
'style-loader?sourceMap',
'css-loader?modules="true"&importLoaders="1"&localIdentName="[path]___[name]__[local]___[hash:base64:5]"',
'sass-loader?sourceMap',
],
},
这样做:
{
test: /\.(scss|sass)$/,
use: [
'style-loader?sourceMap',
'css-loader?modules="true"&importLoaders="1"&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
'sass-loader?sourceMap',
],
},
如果您使用Webpack 2 +
,事件会更好{
test: /\.(scss|sass$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
sourceMap: true,
localIdentName: '[path]___[name]__[local]___[hash:base64:5]'
}
},
'sass-loader'
]
}