webpack使用css-loader时同名@value和类名冲突，无法获取转换后类名

问题原因 #

这是css-loader开启CSS Modules后的默认行为：@value变量、类选择器、动画名等都会被导出到同一个styles对象中，二者命名重复时先被解析的@value会占用对应key，导致同名类名的哈希值无法被正常导出。

解决方案 #

方案1：统一命名规范（最推荐） #

这是成本最低、可维护性最高的方案，团队内约定CSS变量和类名的命名规则即可完全避免重名问题：

• 给@value变量加上类型前缀，例如颜色变量加color-前缀、间距变量加spacing-前缀，修改CSS代码如下：

@value color-container: #f5f5f5;

.container {
    background-color: red;
}

之后JS中用styles.container就能正常拿到类名哈希值，需要用到色值时取styles.color_container即可。

方案2：单独抽离变量文件 #

如果需要保留现有命名，可将所有@value变量单独放到专门的变量文件中，和业务样式文件分离：

1. 新建variables.css，存放所有@value定义：

@value container: #f5f5f5;

2. 在原styles.css中引入变量使用：

@value container from './variables.css';

.container {
    background-color: red;
}

3. 如果需要在JS中用到色值，单独导入变量文件即可：

import styles from './styles.css';
import cssValues from './variables.css';

// styles.container 为类名哈希值，cssValues.container 为色值

方案3：给@value导出添加前缀（需配合postcss） #

如果你既不想改命名，也不想拆分文件，可以通过postcss插件给所有@value的导出键添加统一前缀，避免和类名冲突：

1. 安装postcss-modules-values插件
2. 修改postcss.config.js配置：

module.exports = {
  plugins: [
    require('postcss-modules-values')({
      exportPrefix: 'value_' // 所有@value导出时都会加上该前缀
    })
  ]
}

配置后styles.container对应类名哈希值，styles.value_container对应@value定义的色值。

方案4：禁止导出@value（仅适用于无需在JS中使用@value的场景） #

如果你完全不需要在JS代码中引用CSS的@value变量，可以直接修改css-loader配置，关闭@value导出功能：

{
  loader: 'css-loader',
  options: {
    importLoaders: 1,
    modules: { 
      localIdentName: '[path]___[name]__[local]___[hash:base64:5]',
      exportValues: false // 关闭@value导出
    },
  },
}

配置后styles对象中只会导出类名、动画名等内容，不会包含@value变量，自然不会出现重名冲突。

内容的提问来源于stack exchange，提问作者Antonio Gamiz Delgado