外部css中var(--x)报空值，80%因加载顺序错误，即变量定义文件（如base.css）未置于引用文件（如theme.css）之前，导致解析时变量未声明，border等简写属性各方向color展开为空。
外部CSS中var(--x)报空值，先查加载顺序
外部样式表里的 CSS 变量未定义，80% 是因为 <link rel="stylesheet"> 的 DOM 插入顺序错了。浏览器按 HTML 中 <link> 出现的先后顺序解析样式表，:root 定义必须在所有引用它的规则之前加载。
常见错误写法：
<link rel="stylesheet" href="theme.css"><!-- 里面用了 var(--primary) --><link rel="stylesheet" href="base.css"><!-- 里面定义了 :root { --primary: #007bff; } -->
此时 theme.css 解析时 --primary 还没声明，所有 var(--primary) 都降级为空，border 等简写属性展开后各方向 color 全是 ;。
- 修复方式：把定义变量的 CSS（如
base.css）放在所有引用它的 CSS 之前 - 若用构建工具（Vite/Webpack），检查 CSS 提取插件是否打乱了顺序；Vite 默认异步加载 CSS，可能错过初始渲染
- 强制同步：给
<link>加media="print" onload="this.media='all'"并配合onload回调，但更推荐调整引入顺序
getComputedStyle(el).getPropertyValue('--x') 返回空字符串，不等于未定义
JavaScript 读取未定义 CSS 变量时，getComputedStyle(el).getPropertyValue('--x') 总是返回 ""（空字符串），不是 undefined 或 null。你无法单靠这个返回值判断变量是否真的没声明。
- 真正未定义：变量在
:root和所有祖先元素上都未setProperty或声明 - 已定义但值为空：
el.style.setProperty('--x', '')后，var(--x, red)仍会走默认值，因为''被视为无效值 - 验证建议：用 DevTools 的 Computed 面板看
--x是否列出；或遍历getComputedStyle(document.documentElement)查:root声明
Chrome/Firefox 对 border 简写中未定义 var() 的处理差异很小，但展开结果一致为空
当 border: 1px solid var(--missing) 中的 --missing 未定义，且无 fallback 时，Chrome 109+ 和 Firefox 108+ 行为高度一致：能推导出 border-width 和 border-style，但所有 border-*-color 展开值都是空字符串 ;，cssRules[i].cssText 输出里能看到大量 border-top-color: ; 这类语句。
- 这不是 bug，是符合 CSS Cascading and Inheritance Level 5 规范——未定义变量在 computed-value time 被视为 invalid，导致 color 分量不可计算
-
border-bottom-color: var(--defined)单独写一行，即使--defined未定义，它本身也会保留（不展开），但不会补全其他方向的颜色 - 性能提示：频繁调用
getComputedStyle读未定义变量，尤其在 scroll/resize 中，会触发重排，放大卡顿
变量拼写、大小写、作用域嵌套三者任一出错，var() 就失效
CSS 变量名严格区分大小写和拼写，且作用域不继承自父元素的声明块——只认祖先元素上显式设置的值或 :root。一个字母多写、少写、大小写错位，都会让 var() 找不到目标。
- 错误示例：
:root { --AllPorts: #007bff; }+border: var(--allports)→ 失效（大小写不匹配） - 错误示例：
.box { --color: red; }+.box .inner { border: var(--color); }→ 生效（作用域正确）；但.box { --color: red; } .other { border: var(--color); }→ 失效（.other不在.box内部） - 调试技巧：在 DevTools 的 Styles 面板里，悬停在
var(--x)上，如果显示 “invalid” 或 “not found”，说明变量未定义或拼错；Computed 面板里搜--x看是否出现
变量是否定义，不看 JS 有没有赋值，而看它在 CSS 作用域内有没有被声明过。哪怕你在 JS 里 document.documentElement.style.setProperty('--x', 'red')，如果样式表里 var(--x) 出现在这行 JS 执行之前，照样解析失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
