小编Sea*_*lan的帖子

通过 css-loader 3.4.2 中的 localsConvention 将 kebab-case 转换为camelCase 不起作用

create-react-app 3.4.1出于测试/学习的目的,我使用的是 附带的弹出版本css-loader 3.4.2,并且我尝试重现这些结果,其中 css 选择器以短横线大小写编写,但 js 样式对象将它们转换为驼峰命名法:

样式.css

.foo-baz {
  color: red;
}
.bar {
  color: blue;
}
Run Code Online (Sandbox Code Playgroud)

索引.js

import styles from './styles.css';

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

根据3.0.0 版本中的css-loader变更日志:

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 …
Run Code Online (Sandbox Code Playgroud)

javascript css webpack css-loader create-react-app

6
推荐指数
1
解决办法
6442
查看次数

标签 统计

create-react-app ×1

css ×1

css-loader ×1

javascript ×1

webpack ×1