在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类名也会被替换成驼峰。