css-loader 3.4.2中通过localsConvention将kebab-case转换为camelCase无效

问题描述

出于测试/学习的目的，我使用create-react-app 3.4.1附带的弹出版本css-loader 3.4.2，并且我尝试复制these results，其中以kebab-case编写css选择器，但是js样式对象将它们转换为camelCase：

styles.css

.foo-baz {
  color: red;
}
.bar {
  color: blue;
}

index.js

import styles from './styles.css';

console.log(styles);
// expected result: { fooBaz,bar }
// actual,default results: { foo-baz,bar }

根据3.0.0版中的css-loader changelog：

exportLocalsStyle选项已被删除，转而使用localsConvention选项，它也仅接受{String}值（如果先前的值为'camelCase'，则使用true值， 'asIs'（如果您之前的值为false）

所以我试图这样做：

webpack.config.js

...
{
  test: cssRegex,exclude: cssModuleRegex,use: getStyleLoaders({
    importLoaders: 1,sourceMap: isEnvProduction && shouldUseSourceMap,localsConvention: "camelCase",// my only addition is this line
  }),sideEffects: true,},...

运行npm start和npm run build都可以成功运行，但是转换没有发生，即使在我的js文件中添加console.log(styles)时，我仍然对kebab-case感到困惑App.js文件，输出到控制台的输出对象仍然是kebab-case键和后续的kebab-case值。

我在这里想念什么吗？也许很可能我对css之前/之后的编译过程没有清晰的了解，而我试图将这种逻辑注入错误的位置？有人在css-loader 3.*中有使用该烤肉串来实现camelCase功能的有效示例吗？

旁注：我不想将css-loader软件包更新到最新版本，我打算将此信息重新带到未弹出的create-react-app中，然后用{{1 }}-改变得越少越好。

解决方法

我通过将 localsConvention 选项指定为，

{
    loader: 'css-loader',options: { 
        modules: {
            localIdentName: '[name]_[local]_[hash:base64:5]',},localsConvention: 'camelCase'
     }
},

希望这对某人有所帮助，因为我不得不花几个小时才能找到正确的解决方法。

,

我在模块部分中的exportLocalsConvention修复了此问题：

{
    loader: 'css-loader',options: {
        modules: {
            localIdentName: '[name]_[local]_[hash:base64:6]',exportLocalsConvention: 'camelCase'
        }
    }
},