webpack 爬坑记

Posted 2020-08-25

1. css modules 里中划线命名的类名

　　在 css 中 类似 ‘.progress-bar‘ 这样带中划线的类名是合法的. 但是在 JS 里, 会把中划线当成减号, css modules 可能无法按我们的意图解析类名.

　　编译出来的东西放浏览器里运行,会在控制台里看到变量未声明的错误.

　　解决方法:

　　　　1. 假如我们是按这样引入样式 import styles from ‘../style/style.css‘; 

　　　　　那么我们再引入里面的 ‘.progress-bar‘ 时得 {styles[‘progress-bar‘]} 这样调用.

　　　　2. 在 loader 里这样配置 css-loader

{
        test: /\.css$/,
        loader: ‘style!css?modules&camelCase‘ // 在后面加上 ‘&camelCase‘
}

　　　　这样我们就可以按驼峰命名法来调用带中划线的类名. {styles.progressBar}

参考自: https://gold.xitu.io/entry/571d867379bc440064c485df