必须按环境拆分主题变量文件并在构建时注入，而非仅靠JS动态修改CSS变量；Vite通过additionalData按mode导入对应SCSS变量文件，确保Element Plus等组件库在编译期获取正确主题色。
主题变量文件必须按环境拆分，不能只靠 JS 动态切换
只在运行时用 document.documentElement.style.setProperty() 改 :root 变量，无法解决构建时样式编译问题——比如 Element Plus 的 SCSS 主题色是构建期读取 $primary-color 计算生成的，JS 改 CSS 变量对它完全无效。真正要生效，得让预处理器（SCSS/Less）在构建阶段就拿到对应环境的主题值。
做法是：为每个环境准备独立的变量文件，例如：
-
src/styles/variables.development.scss→ 定义开发环境主色为#409EFF -
src/styles/variables.production.scss→ 定义生产环境主色为#1890FF -
src/styles/variables.test.scss→ 测试环境用#52C418
这些文件不直接 import，而是由 Vite 配置按 mode 动态注入。
vite.config.ts 中用 mode + additionalData 实现变量注入
Vite 的 css.preprocessorOptions.scss.additionalData 支持字符串拼接，可结合 process.env.MODE 选择变量文件。注意：这里不能用异步逻辑或条件 import，必须写成静态字符串模板。
立即学习“前端免费学习笔记（深入）”；
正确写法示例：
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/styles/variables.${process.env.MODE}.scss";`
}
}
}
这个配置会让所有 <style lang="scss"> 和 .scss 文件自动获得当前 mode 对应的变量。但需确保：
- 所有
.env.[mode]文件存在且命名严格匹配（如.env.development对应process.env.MODE === 'development'） -
variables.[mode].scss文件中必须包含:root导出语句，例如：:root { --el-color-primary: #409EFF; } - 不要在
additionalData里写@import "@/styles/theme.scss"这类通用文件，否则会覆盖环境专属变量
避免 scoped 样式导致变量失效
Vue 单文件组件加了 scoped，内部 var(--el-color-primary) 确实能读到新值，但 Element Plus 等库的样式本身没 scoped，它们依赖的是构建时编译出的硬编码颜色值。所以光靠 JS 切换变量，按钮还是旧颜色。
关键动作有两层：
- 组件库主题必须走预处理器覆盖路径（如 Element Plus 的
el-button背景色由$--color-primary控制，这个变量必须在构建前被variables.[mode].scss覆盖） - 自定义组件中禁用
var(--xxx)直接调用，改用 class 绑定，例如：<div :class="{ 'theme-dark': theme === 'dark' }">，再在全局 CSS 里写.theme-dark { --el-color-primary: #001529; }
否则你会看到：控制台里 :root 值变了，DevTools 里按钮元素也显示用了 var(--el-color-primary)，但实际渲染颜色就是不动——因为那行 CSS 是构建时生成的静态规则，不是实时计算的。
localStorage 持久化和系统偏好监听必须后置
环境级主题（开发/测试/生产）是构建时决定的，而用户手动切换深色模式、保存主题偏好是运行时行为。这两者不能混为一谈，否则会导致构建产物污染或变量冲突。
推荐分层处理：
- 构建时：用
variables.[mode].scss固定基础品牌色（如公司蓝）、字体、圆角等不可变设计 token - 运行时：用
localStorage存themeMode: 'light'|'dark'，再通过 JS 设置--theme-mode变量，仅用于控制明暗切换类样式（背景、文字对比度等） - 系统偏好监听（
prefers-color-scheme）只作为themeMode的 fallback，默认值，不参与构建逻辑
最容易被忽略的是：很多人把所有变量都塞进 :root，结果构建时环境变量和运行时用户偏好互相覆盖。记住，--el-color-primary 这类品牌变量不该被用户改，它属于构建产物；--theme-bg 这类展示变量才该留给 JS 动态控制。
