CSS变量不可见是因为@import加载的样式表晚于主文档解析，其:root声明无法反向注入主CSSOM；变量查找不跨@import边界，getComputedStyle读取的是未声明该变量的主文档:root。
CSS变量不是全局常量，而是作用域绑定的运行时属性。@import引入的CSS文件在解析时形成独立子树，其:root里定义的--primary-color不会自动注入主文档的:root，所以其他CSS或JS查不到。
为什么getComputedStyle(document.documentElement).getPropertyValue('--primary-color')返回空字符串
浏览器构建CSSOM时，被@import加载的样式表是“后置解析”的：必须等宿主CSS下载并开始解析后，才发起请求、下载、再解析被导入文件。此时主文档的:root早已完成初始化，新变量无法反向注入。
- 变量查找是向上遍历CSSOM树的过程，只认声明节点的父级作用域，不跨
@import边界 - 即使
variables.css里写了:root { --primary-color: #007bff; }，它也只对自身内部var(--primary-color)生效 - JS调用
getComputedStyle读的是主文档:root的计算值，而该节点压根没声明这个变量
@import写在components.css顶部为什么还是不生效
问题不在位置，而在加载链路。只要components.css本身是被<link>加载的，它的@import就属于二级加载——变量永远晚于主CSSOM构建完成。
- ✅ 正确路径：
main.css第一行写@import './variables.css';，且main.css由<link rel="stylesheet" href="main.css">加载 - ❌ 错误嵌套：
theme.css里@import 'variables.css'，再用<link>加载theme.css→ 变量注入时机彻底错位 - 构建工具（如Vite）默认不内联
@import，线上环境大概率发出额外HTTP请求，加剧时序问题
真正安全的复用方式只有两种
要么让变量声明成为CSSOM中第一个被解析的节点，要么绕过CSSOM直接写入DOM。
立即学习“前端免费学习笔记（深入）”；
- 构建时合并：用PostCSS插件（如
postcss-import）或Sass的@use提前把变量注入最终CSS输出的最顶部 - JS兜底写入：
document.documentElement.style.setProperty('--primary-color', '#007bff');，但会脱离CSS文件管理，不适合主题系统长期维护 - 绝对避免混用：
Sass @use是编译时模块机制，CSS @import是运行时加载行为，强行共存会导致变量链完全断裂
最容易被忽略的点是：CSS变量的“可见性”取决于它在CSSOM树中的物理位置，而不是你写了多少次@import。哪怕路径全对、语法无误、状态码200，只要它没成为首个解析的:root声明，就注定不可见。
