直接改:root变量没生效，主因是后加载的样式覆盖了同名变量；css变量按解析顺序层叠，后声明者胜出，需确保自定义:root在所有第三方库css之前加载并唯一存在。
直接改 :root 里的变量却没生效，大概率是层叠顺序被后加载的样式覆盖了——不是变量写错了，而是它被悄悄替换了。
为什么后声明的 :root 会覆盖前面的
CSS 变量按解析顺序层叠，同名变量后出现的声明直接覆盖前面的。浏览器不合并、不警告，只取最后一个有效值。
- 多个
:root块并存时（比如 Bootstrap 的 CSS 和你自定义的 theme.css 都含:root），谁在 HTML 中<link>得更靠后，谁的变量就胜出 - 构建工具（如 Webpack）若把第三方库的 CSS 插入到你主题文件之前，你的
--brand-primary就根本没机会生效 - 用
@import加载变量文件时，如果它出现在其他规则之后，变量可能已解析完毕，后续声明无效
如何确保自定义 :root 永远优先
核心原则：让变量定义成为整个样式系统里“第一个被解析的 :root”，且只存在一份。
- 把所有变量集中到一个独立文件（如
variables.css），内容仅含:root { /* 变量声明 */ }，不加任何其他规则或注释干扰 - 在 HTML 的
最顶部用<link rel="stylesheet" href="css/variables.css">引入，早于所有其他 CSS - 禁用任何在组件或局部样式中重复定义
:root的行为；如果必须动态覆盖（如暗色模式），用@media或[data-theme]在同一个:root块内重写，而非新建一个 - Vite 用户可在
vite.config.ts中配置css.preprocessorOptions.scss.additionalData注入变量，Webpack 用户应避免css-loader启用modules: true导致变量作用域隔离
var() 失效但控制台无报错，怎么快速定位
变量失效默认静默降级，var(--x) 计算结果可能是 initial 或继承值，表面看不出问题。
- 打开 DevTools → Computed 面板 → 展开根元素（
）→ 查看 “Custom Properties” 区域，确认目标变量是否真实存在且值正确 - 检查拼写和大小写：
--Color-Primary和--color-primary是两个变量 - 若用了 fallback：
var(--color-primary, #007bff)，当变量未定义时会回退，容易误判为“生效了” - 在 Elements 面板中右键点击元素 → “Reveal in Computed” → 搜索该属性（如
background-color），看计算值来源是否指向var(--x)还是直接写死的值
真正麻烦的不是定义变量，而是变量被谁覆盖、在哪一层被覆盖、是否被构建流程拆散——这些细节不会报错，但会让主题切换变成玄学调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
