如何修改React CSS Modules生成的DOM类名仅保留随机ID？

你需要修改css-loader的localIdentName配置项，这个选项直接控制CSS Modules生成的类名格式。默认格式通常包含文件名、本地类名和随机哈希，你只需要将它设置为只生成随机哈希即可。

1. 普通Webpack项目配置 #

找到项目根目录下的webpack.config.js（或生产环境专属配置文件如webpack.prod.js），定位到处理CSS模块的规则，修改css-loader的options：

module.exports = {
  // 其他配置项...
  module: {
    rules: [
      {
        test: /\.module\.css$/, // 匹配CSS模块文件
        use: [
          // 生产环境建议用MiniCssExtractPlugin.loader替代style-loader
          process.env.NODE_ENV === 'production' 
            ? require('mini-css-extract-plugin').loader 
            : 'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                // 只生成5位随机base64哈希作为类名，长度可自行调整
                localIdentName: '[hash:base64:5]',
              },
            },
          },
        ],
      },
    ],
  },
  // 如果用MiniCssExtractPlugin，记得在plugins里注册
  plugins: process.env.NODE_ENV === 'production' 
    ? [new require('mini-css-extract-plugin')()]
    : [],
};

2. Create React App项目配置 #

如果是用CRA创建的项目，默认隐藏Webpack配置，有两种处理方式：

方式一：Eject后修改 #

执行npm run eject暴露配置文件，然后在config/webpack.config.js中找到cssModuleRegex对应的规则：

// 找到处理CSS模块的规则段
{
  test: cssModuleRegex,
  use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
    modules: {
      // 修改为仅保留随机哈希
      localIdentName: '[hash:base64:5]',
    },
  }),
}

方式二：用react-app-rewired修改（无需Eject） #

1. 安装依赖：npm install react-app-rewired --save-dev
2. 在项目根目录创建config-overrides.js：

module.exports = function override(config, env) {
  // 定位到CSS模块的加载规则
  const cssModuleRule = config.module.rules.find(rule => 
    rule.oneOf && rule.oneOf.some(item => item.test?.toString().includes('.module.css'))
  );

  if (cssModuleRule) {
    cssModuleRule.oneOf.forEach(item => {
      if (item.test?.toString().includes('.module.css')) {
        item.use.forEach(loader => {
          if (loader.loader?.includes('css-loader')) {
            // 修改localIdentName配置
            loader.options.modules.localIdentName = '[hash:base64:5]';
          }
        });
      }
    });
  }

  return config;
};

3. 修改package.json中的启动命令：

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  }
}

注意事项 #

• 若需要开发环境保留完整类名方便调试，生产环境仅用随机ID，可以根据环境变量判断配置：

localIdentName: process.env.NODE_ENV === 'production' 
  ? '[hash:base64:5]' 
  : '[name]__[local]_[hash:base64:5]'

• 确保所有CSS模块文件都遵循.module.css的命名规范，否则不会被该规则处理。

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