React Webpack项目中CSS Modules与Antd 4类名哈希问题求助

方案1：不让Antd类名带哈希 #

要避免ant-menu这类Antd原生类名被CSS Modules添加哈希，只需在webpack的css-loader配置中排除特定前缀的类名转换：

在webpack规则中处理css/less文件时，给css-loader的modules选项添加排除规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[name]-[hash:base64:5]',
                // 排除ant-开头的类名，不进行哈希转换
                exclude: /ant-/,
              },
            },
          },
          'less-loader',
        ],
      },
    ],
  },
};

也可以用正则匹配限定需要哈希的类名：

modules: {
  localIdentName: '[name]-[hash:base64:5]',
  // 仅对非ant-开头的类应用哈希
  localIdentRegExp: /^(?!ant-).*$/,
}

编译后.header .ant-menu {}会变成.header-[hash] .ant-menu {}，Antd类名保留原样。

方案2：让Antd类名统一哈希 #

如果要让Antd类名也统一添加哈希，需要修改样式编译规则，将Antd样式纳入CSS Modules处理：

1. 确保用babel-plugin-import按需引入Antd时，配置style: true让样式通过本地loader处理
2. 调整webpack规则，把Antd的样式目录也纳入CSS Modules处理，同时设置统一的哈希规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                // 全局统一的哈希规则
                localIdentName: 'app-[hash:base64:5]',
              },
            },
          },
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                javascriptEnabled: true,
              },
            },
          },
        ],
        // 包含本地源码和Antd的样式目录
        include: [/src/, /node_modules\/antd/],
      },
    ],
  },
};

注意：这种方式下Antd组件内部的类名会自动同步编译后的哈希，但如果手动写className="ant-menu"，需要改用CSS Modules导出的类名，或者用:global()标记全局类。

更灵活的局部控制 #

不想改webpack配置的话，直接在样式文件里用:global()伪类区分本地类和全局类：

.header { /* 本地类，会被加哈希 */
  background: #fff;
}
:global(.ant-menu) { /* Antd类，不会被加哈希 */
  border: none;
}

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