Vite构建时如何配置CSS模块类名，实现多主题切换类名一致？

你当前的问题核心是：Vite默认会根据类名+文件路径+CSS内容生成CSS模块的哈希后缀，导致不同主题文件里的同名类（比如.primary）生成不同的哈希后缀，切换主题时DOM上的类名和新主题的样式类名不匹配，样式无法生效。

要实现不同主题下同一CSS模块类名保持一致，只需修改Vite的css.modules配置，自定义类名的生成规则，让哈希仅基于类名本身生成：

import { defineConfig } from 'vite';
import crypto from 'crypto';

// 生成固定哈希的工具函数：同一输入字符串返回相同的短哈希
function getFixedClassHash(className) {
  return crypto
    .createHash('md5')
    .update(className)
    .digest('hex')
    .slice(0, 8); // 取前8位缩短哈希长度
}

export default defineConfig({
  css: {
    modules: {
      // 自定义类名生成规则：类名 + 固定哈希
      generateScopedName: (name) => `${name}_${getFixedClassHash(name)}`
    }
  }
});

配置说明 #

• 默认的generateScopedName会结合文件路径计算哈希，所以不同主题文件里的同名类会得到不同后缀；
• 上面的配置只根据类名本身生成哈希，不管这个类写在哪个主题文件里，.primary都会生成相同的哈希后缀（比如_AsDf123）；
• 哈希算法用MD5是为了保证稳定性，取前8位是平衡唯一性和类名长度。

注意事项 #

• 如果你的项目中存在非主题模块的同名类（比如其他组件也用了.primary），会导致类名冲突，建议给主题类名加统一前缀（比如theme-primary），避免全局冲突；
• 主题文件需要仍以CSS模块的方式导入（比如import theme1 from './theme1.module.css'），确保构建时应用这个类名规则；
• 动态切换主题时，只需加载对应主题的CSS模块文件（或动态注入样式），DOM上的类名会自动匹配对应主题的样式规则。

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