动态导入主题CSS Modules必须用import()而非require，Vite仅支持静态路径；类名须通过styles['theme-dark']或styles.themeDark访问，禁用字符串拼接；避免:global污染，主题变量应由data-theme控制，CSS Modules仅负责结构样式。
动态导入主题CSS Modules文件必须用import()，不能require
Webpack支持require('./themes/' + theme + '.module.css')这种写法，但Vite不认——它只允许静态字符串路径。硬写require在Vite项目里会构建失败或热更新失效。
正确做法是统一用import()动态导入，它返回Promise，能被Vite和Webpack同时识别：
-
import(`./themes/${currentTheme}.module.css`)—— 注意是反引号，不是单引号 - 必须配合
async/await或.then()处理加载完成后的样式对象 - 不要在
setup()顶层直接调用import()，否则组件未挂载就执行，容易触发空引用
类名访问必须走模块导出对象，不能拼接字符串
CSS Modules会把.theme-dark编译成类似themeDark_abcd123的哈希名，JS里硬写className="theme-dark"或`theme-${theme}`必然失效。
安全写法只有两种：
立即学习“前端免费学习笔记（深入）”；
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
-
styles['theme-dark']—— 用方括号访问，兼容短横线命名 -
styles.themeDark—— 把CSS里写成.theme-dark { ... }，JS里用驼峰（需配置camelCase选项或手动重命名） - 别混用：比如
clsx(styles.button, `theme-${theme}`)中后半段是字符串，不会被CSS Modules处理，结果为空
避免:global污染导致主题失控
有人想省事，在主题CSS里写:global(.theme-dark) { --primary: #000; }，这会让所有引入该文件的组件都带上这个全局规则，切换主题时变成全站覆盖，失去模块隔离意义。
真正可控的方式是：
- 每个主题单独一个CSS Modules文件，如
theme-dark.module.css、theme-light.module.css - 变量定义交给
:root或data-theme，CSS Modules只管结构类名 - 如果要用CSS变量，确保它们定义在顶层容器上，并由JS控制
document.documentElement.setAttribute('data-theme', 'dark')
Vite热更新时主题CSS可能不重载
动态import()的主题文件在开发时修改后，Vite默认不会触发组件重渲染，样式看起来“没变”。这不是bug，是Vite对动态导入的缓存策略。
临时解决办法（仅开发阶段）：
- 在主题CSS文件末尾加一行注释，比如
/* @refresh reload */，强制Vite监听变更 - 或者在组件里加个
key，比如:key="currentTheme"，让Vue强制重建子树 - 生产环境无需处理，因为主题切换本身是运行时行为，不依赖HMR
实际切换逻辑中，最易忽略的是「CSS Modules类名与data-theme的职责分离」：前者负责组件结构样式（按钮边框、内边距），后者只管视觉变量（颜色、阴影）。混在一起写，后期维护成本会指数级上升。
