为什么CSS变量在:root里定义后页面仍然取不到？

页面取不到:root的CSS变量，主因是变量未进入样式系统：要么variables.css加载失败（非200状态码）、要么加载顺序靠后被覆盖、要么组件不读:root而依赖父容器声明，或Web Components需:host{--x:inherit}显式透传。

页面取不到 :root 里定义的 CSS 变量，大概率不是变量没写，而是它根本没进浏览器的样式系统——要么加载失败、要么被覆盖、要么压根没被继承到目标元素。

变量文件没加载成功或顺序错了

浏览器按 <link> 的顺序解析 CSS，变量必须在使用前加载完成。哪怕 :root 看似存在，也可能来自一个 404 的文件（DevTools 有时会缓存旧样式树）。

1. 打开 Network 面板，确认 variables.css 返回状态码是 200，不是 404 或 403
2. <link rel="stylesheet" href="css/variables.css"> 必须放在所有其他 CSS <link> 之前
3. 避免用 @import 在末尾引入变量文件——它会阻塞后续规则，且构建工具（如 Webpack css-loader）默认不支持

变量被同名声明覆盖或作用域失效

CSS 变量靠继承传播，但继承链很容易被局部声明打断。你改了 :root，但组件可能读的是父容器上的同名变量。

1. 检查目标元素的 Computed 面板，搜 color 或对应属性，看最终值来自哪条规则；如果显示 initial 或继承自父级，说明变量没传下来
2. 某些 UI 库（如 antd）不读 :root，而是监听直接父节点——试试把变量移到外层容器：.page-layout { --primary-color: #52c418; }
3. Web Components 中，:root 的变量默认进不了 Shadow DOM，必须加：:host { --primary-color: inherit; }

语法或拼写导致静默失败

浏览器对 setProperty 和 CSS 声明都极其敏感，错一个字符就静默丢弃，不报错也不警告。

1. 变量名必须带 -- 前缀：--color ✅，color 或 -color ❌
2. 值必须含单位（用于尺寸/颜色等）：'16px' ✅，16 或 '16' ❌（后者在 font-size 中会被当作无效值）
3. SCSS 中注入变量必须用插值：--primary-color: #{$primary}; ✅，--primary-color: $primary; ❌（编译后变成字面量，浏览器当无效声明）

JS 动态设置后立刻读取，拿到的是旧值

document.documentElement.style.setProperty('--x', 'y') 是同步写入 style 对象，但依赖它的 var(--x) 要等下一帧才重算。

1. 别在 setProperty 后立刻调 getComputedStyle().getPropertyValue('--x')，大概率还是旧值
2. 真要确认生效，包一层 requestAnimationFrame：

   document.documentElement.style.setProperty('--theme', 'dark');
   requestAnimationFrame(() => {
   console.log(getComputedStyle(document.documentElement).getPropertyValue('--theme'));
   });

最容易被忽略的是：变量“显示已定义”不等于“实际可用”。DevTools Styles 面板里看到 --x 列出来了，不代表它被成功解析或进入了目标元素的作用域链——得去 Computed 面板看最终计算值，再顺藤摸瓜查加载、继承和语法三关。