如何移除CSS Modules生成样式类名中的文件名前缀？

存在可行配置方式，核心是调整构建工具中CSS Modules的类名生成规则，移除规则里对应源文件名的占位符即可，不同构建工具的具体配置方法如下：

Webpack 项目（基于css-loader） #

Webpack 场景下的CSS Modules能力由css-loader实现，默认类名生成规则通常为[name]__[local]--[hash:base64:5]，其中[name]占位符就对应CSS模块的文件名，也就是示例中Header_前缀的来源。直接把规则中文件名相关的片段删除即可，配置示例：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.module\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                // 移除原规则里的 [name]__ 片段，仅保留类名和hash即可
                localIdentName: "[local]--[hash:base64:5]",
              }
            }
          }
        ]
      }
    ]
  }
}

Vite 项目 #

Vite 原生内置CSS Modules支持，配置项定义在vite.config.js的css.modules字段下，修改generateScopedName的生成规则，去掉文件名对应的占位符即可：

// vite.config.js
export default {
  css: {
    modules: {
      // 移除规则里的文件名占位符，仅保留自定义类名和hash
      generateScopedName: "[local]--[hash:base64:5]"
    }
  }
}

注意事项 #

• 上述配置是全局生效的，修改后项目内所有CSS Modules文件生成的类名都不会再携带文件名前缀
• 规则里一定要保留hash后缀，不要为了类名短直接删掉hash部分，否则不同CSS模块文件里如果写了同名类（比如多个模块都定义了.container类），会出现样式互相覆盖的问题
• 如果担心默认的5位hash存在碰撞概率，可以适当调长hash位数，比如把规则改成[local]-[hash:base64:8]

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