babel-plugin-react-css-modules 不匹配样式与 styleName
babel-plugin-react-css-modules is not matching styles with styleName
问题
我正在尝试在我的 React 项目中使用 babel-plugin-react-css-modules 以获得更好的性能,而不是 React CSS 模块 。
但是,未正确应用样式。
原因
<style>
标签中的版本用奇怪的连字符包裹,例如:
- 在
<style>
标签中:-components-Foo-___Foo__foo___1fcIZ-
- 关于DOM
元素 class 名称:
components-Foo-___Foo__foo___1fcIZ
Even if we are using the same
localIdentName
, the generated results are different from selectors in css and className on DOM element.(Note: In babel-plugin-react-css-modules, the
localIdentName
is[path]___[name]__[local]___[hash:base64:5]
as hard-coded inoptions.generateScopedName
)
知道为什么会有 hypen-wrapper 吗?
经过一番努力,我自己找到了解决方案。
原因
这是由于 css-loader
的一个怪癖:如果 localIdentName
选项周围有双引号,它将用连字符包裹生成的 class 名称。
工作示例
所以不要在 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'
]
}