webpack踩坑系列之css-loader的localsConvention属性不生效

在react开发过程中经常需要style in js，因为css的className经常会写成破折号连接，而在js中写的时候看起来则是非常的不优雅。

file.css

.class-name {
}

import styles from 'file.css';


const dom = () => (
   <div className={styles['class-name']}>demo</div>
)

得想办法把它改掉。

首先日常参考webpack官方配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: 'css-loader',
        options: {
          localsConvention: 'camelCase',
        },
      },
    ],
  },
};

假想中成功了。

file.js

import { className } from 'file.css';

然后发现并没有生效，百度了一下，发现只有提问的，没有解答。so，只能自己找答案。

然后翻了一下github发现，新版本的webpack上写的其实是css-loader 3.0以后的写法。使用旧版本的需要改一下写法，类似这样：

 

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: 'css-loader',
        options: {
          camelCase: true,
        },
      },
    ],
  },
};

或者直接升级css-loader到 3.0 +也是可以的。 

然后就可以愉快的撸码了。

import styles from 'file.css';


const dom = () => (
   <div className={styles.className}>demo</div>
)

最后需要注意下配置

配置属性有两种类型的，一种是只在js使用中可以通过驼峰引用（false, 'dashes'），真实的css还是通过破折号连接的。

另外一种（true, 'only', 'dashesOnly'）不仅以驼峰形式使用，代码编译打包后，原来的css类名也会被替换成驼峰。