CSS变量失效主因是作用域隔离、异步加载时序错配及路由复用残留；须用非scoped样式全局定义、确保变量文件优先加载、集中管理并避免JS动态修改。
路由跳转后 CSS 变量突然“失效”或值错乱
不是变量丢了，而是样式加载时机和作用域隔离没对齐。Vue/React 的异步路由组件（比如 component: () => import('./DarkPage.vue')）会把关联的 <style scoped> 异步注入，而它里面写的 :root { --bg: #121212; } 在 scoped 模式下会被浏览器直接忽略——:root 不在组件作用域内，压根不会生效。
常见现象：首页是深色主题，点进某个路由页后背景变白；或者两个页面都用了 var(--primary-color)，但渲染出的颜色不一样。
- 检查网络面板，确认定义主题变量的全局 CSS 文件（如
src/assets/styles/vars.css）是否已加载、是否 200、是否在路由组件挂载前就绪 - 所有主题变量必须集中写在非
scoped的<style>或独立 CSS 文件中，并确保它被入口文件（main.js或App.vue）主动import - 禁止在多个路由组件里各自声明同名
:root变量——它们互不感知，构建时可能覆盖或冲突
:root 声明位置不对，导致嵌套组件读不到新值
很多人把变量写在 .page-dark :root 或 body.theme-dark :root 里，这是无效的。CSS 中没有“嵌套 :root”语法，:root 永远只指代 HTML 根元素，前面加选择器只会让整条规则失效。
正确做法是分开两层：全局默认值 + 属性选择器覆盖。
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
立即学习“前端免费学习笔记（深入）”；
-
:root里只放基础 fallback 值，比如--text-primary: #333; - 用
[data-theme="dark"]这类属性选择器单独覆盖，例如[data-theme="dark"] { --text-primary: #f9fafb; } - 切换主题时只改
document.documentElement.dataset.theme，不要操作style.setProperty()动态设值
第三方组件库的变量被静默覆盖
Element Plus、Naive UI、Vant 4 这些库内部样式都依赖特定命名的 :root 变量（如 --el-color-primary、--n-primary-color），但如果你的主题 CSS 文件 import 在组件库之后，或者用了高权重选择器（如 .theme-dark .el-button）硬覆盖颜色，库内部的 var(--el-color-primary) 就会取到旧值。
- 确保
import './styles/theme.css'出现在import 'element-plus/dist/index.css'之前 - 别在 JS 里用
style.setProperty('--el-color-primary', ...)手动改——容易被后续样式重置，且无法触发组件库内部的响应逻辑 - 查 DevTools 的 Computed 面板，搜索
--el-color-primary，看 “Defined in” 是哪一行，确认是否被你的规则命中
keep-alive 或路由复用导致变量残留
Vue Router 默认开启组件复用，A 页面通过 JS 注入了 :root 变量或 class，跳转到 B 页面后 A 的样式未清理，B 又没重新设置，结果 B 渲染时沿用了 A 留下的变量值。
更隐蔽的是：某些 UI 库在 mounted 时读取一次 getComputedStyle().getPropertyValue() 缓存颜色，之后主题变了它也不更新。
- 避免用 JS 直接操作
document.documentElement.style设置变量，除非你严格控制生命周期（beforeRouteLeave清理 +beforeRouteEnter恢复） - 优先用
data-theme类名切换，靠 CSS 层叠自动响应，不依赖 JS 主动刷新 - 首次加载时从
localStorage读主题后，必须同步设置dataset.theme并确保 DOM 已存在——放在<head>内联<script>中执行最稳
:root，且只声明一次；切换必须靠 class 或 data 属性触发 CSS 层叠；任何 JS 动态 setProperty 都要配套清理逻辑，否则残留比失效更难排查。 
