动态导入主题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}`必然失效。
安全写法只有两种：
-
styles['theme-dark']—— 用方括号访问，兼容短横线命名 -
styles.themeDark—— 把CSS里写成.theme-dark { ... }，JS里用驼峰（需配置camelCase选项或手动重命名） - 别混用：比如
clsx(styles.button, `theme-${theme}`)中后半段是字符串，不会被CSS Modules处理，结果为空
避免:global污染导致主题失控
有人想省事，在主题CSS里写:global(.theme-dark) { --primary: #000; }，这会让所有引入该文件的组件都带上这个全局规则，切换主题时变成全站覆盖，失去模块隔离意义。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章