能，但需所有CSS文件被同一文档加载且定义在使用前；变量失效时应检查Computed面板中的Custom Properties、拼写、大小写及单位是否匹配。
在 :root 里定义变量真能跨文件生效？
能，但前提是所有用到这些变量的 CSS 文件都通过 <link> 或 @import 被实际加载进同一文档上下文。浏览器不关心你“写了多少个 :root”，只认最终渲染时 DOM 树根节点上计算出的那套值。
常见错误现象：color: var(--primary); 显示为初始色（如黑色），控制台没报错，开发者工具里也看不到变量被识别 —— 很可能是因为该 CSS 文件压根没被 HTML 加载，或加载顺序错乱（比如变量定义在使用它的样式之后）。
- 确保定义
:root的 CSS 文件是最早引入的，或至少早于所有依赖它的样式文件 - 避免在多个独立 CSS 文件中重复写
:root；如果必须分文件维护，用@import把变量文件前置导入（注意：Webpack/Vite 等构建工具中@import行为可能和原生不同） - 不要指望
:root在<style></style>标签内定义后能被外部 CSS 文件读取 —— 它们作用域不互通
var(--x) 失效却没报错，怎么快速定位？
CSS 变量失效默认静默降级，不会中断样式解析，所以特别难察觉。关键不是看“有没有定义”，而是看“当前元素计算出的 :root 值里有没有它”。
使用场景：组件库样式和业务样式混用、微前端多子应用共用主题时最常踩坑。
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具，在“Computed”面板里搜
--，确认目标变量是否出现在根元素的“Custom Properties”区域 - 检查变量名拼写——
--color-primary和--color-primary-是两个变量，CSS 不报错也不警告 - 注意大小写敏感：
var(--BgColor)和var(--bgcolor)不等价 - 如果用了
!important在变量赋值处（如--c: red !important;），它不会提升到var()调用时的优先级，纯属无效写法
构建工具里 :root 被拆散或覆盖了怎么办？
Webpack 的 css-loader 默认启用模块化，Vite 默认支持 @import 但会做 scope 隔离 —— 这些都会让原本想全局共享的 :root 实际变成局部有效。
性能影响：变量本身无运行时开销，但若构建后生成了多份重复的 :root 块，会增大 CSS 体积；更糟的是，不同文件里同名变量值不一致，导致视觉不一致。
- Vite 用户：在
vite.config.ts中配置css.preprocessorOptions.scss（或其他预处理器）并确保变量文件被@use或@import显式引入，而非靠构建自动合并 - Webpack 用户：禁用
css-loader的modules选项，或把变量定义单独抽成一个非模块化 CSS 文件（如theme.css），再用<link rel="stylesheet">加载 - 别用
postcss-preset-env自动注入:root—— 它只处理语法降级，不解决作用域问题
动态改 :root 变量值，为什么有时不生效？
用 JavaScript 改 document.documentElement.style.setProperty('--x', 'y') 是有效的，但有几个硬性前提：
- 修改时机必须在样式已计算之后（比如放在
DOMContentLoaded后），否则可能被后续样式重置 - 不能在 Shadow DOM 内部直接改宿主
:root—— 它对 shadow root 不可见，得从外部 document 修改 - 如果变量用于
@media查询内部（如@media (min-width: var(--breakpoint))），这不合法，CSS 规范禁止变量出现在媒体查询条件中 - 某些旧版 Safari 对动态设置变量后的重绘有延迟，可加一次
getComputedStyle(document.documentElement).color强制触发重排
真正容易被忽略的点：变量值带单位时，var(--size) 和 calc(var(--size) * 2) 中的 --size 必须本身含单位（如 16px），否则 calc 会报错且整条声明失效 —— 浏览器不会提示，只会静默丢弃该样式规则。
