Webpack 1.15 React项目：CSS模块CSS对象与JS代码不匹配问题

嘿，我来帮你搞定这个Webpack CSS Modules的小问题！你遇到的情况是Webpack 1里启用css?modules时的默认行为——css-loader会把SCSS里的类名映射包裹在default属性里，这就导致你在React组件里直接用styles.className时找不到对应的类名，自然样式就不生效啦。下面给你两种实用的解决办法：

方法一：修改组件的导入方式 #

把ES6默认导入改成全部导入，这样就能直接访问类名对象里的属性：

// 替换原来的默认导入
import * as styles from './你的组件样式文件.scss';

// 在组件里正常使用类名
<div className={styles.yourClassName}></div>

方法二：调整css-loader配置，让类名直接导出 #

在css-loader的参数里加上exportLocalsConvention=named，这个参数会让css-loader直接把类名作为对象属性导出，不用包裹在default里。修改后的Webpack loader配置如下：

loaders: [
  { 
    test: /\.(scss|css)$/, 
    loader: 'style!css?modules&exportLocalsConvention=named!sass'
  }
]

改完之后你就能继续用import styles from './你的组件样式文件.scss'，直接通过styles.yourClassName调用类名了。

另外补充个小提示：如果你其实不需要CSS Modules的局部作用域功能，只是想编译SCSS的话，直接去掉?modules参数就行——这样类名不会被转换，也不会出现default属性的问题：

loaders: [
  { 
    test: /\.(scss|css)$/, 
    loader: 'style!css!sass'
  }
]

内容的提问来源于stack exchange，提问作者Axel