使用react-css-modules生成随机类名，如何得到Component_myBtn_XxXx格式类名

你的问题是css-loader默认开启modules时使用纯哈希作为类名，只需要修改webpack配置中css-loader的modules配置项即可实现自定义类名格式。

配置步骤 #

1. 打开项目根目录的webpack.config.js配置文件，找到处理.css后缀文件的规则段
2. 修改css-loader的配置项，新增modules.localIdentName参数指定类名生成规则，参考配置如下：

// webpack.config.js 核心配置片段
module.exports = {
  // 其他webpack配置（entry、output、plugins等保持不变）
  module: {
    rules: [
      {
        // 匹配css文件
        test: /\.css$/,
        use: [
          // 开发环境用style-loader，生产环境如果用了MiniCssExtractPlugin就替换为MiniCssExtractPlugin.loader
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                // 自定义类名格式：[css文件名]_[原始类名]_[5位哈希]
                localIdentName: '[name]_[local]_[hash:base64:5]',
                // 仅对后缀为.module.css的文件启用css modules，不影响全局css
                auto: /\.module\.css$/i
              }
            }
          }
        ]
      },
      // 如果项目使用less，同步修改less的处理规则
      {
        test: /\.less$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[name]_[local]_[hash:base64:5]',
                auto: /\.module\.less$/i
              }
            }
          },
          'less-loader'
        ]
      }
    ]
  }
}

3. 如果你需要生成[组件名]_[类名]_[哈希]的格式，只需要保证css文件名和对应组件文件名保持一致即可，比如组件为Component.jsx，对应的css文件命名为Component.module.css，最终生成的类名就是Component_myBtn_xxxxx。

配置参数说明 #

• [name]：自动替换为当前css文件的文件名（不含后缀）
• [local]：自动替换为你在css中写的原始类名，比如示例中的myBtn
• [hash:base64:5]：自动生成5位长度的base64哈希值，避免不同组件的类名冲突

修改配置后重启webpack服务即可生效。

内容的提问来源于stack exchange，提问作者Mr.Kurosava