首页 > 代码库 > webpack 爬坑记

webpack 爬坑记

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

webpack 爬坑记