循环引用导致 css 变量求值失败，getcomputedstyle 返回空字符串；需结合 styles 面板“invalid”提示与手动链路排查定位闭环，运行时验证最可靠。
用 getComputedStyle 检查 var() 返回空字符串
浏览器对 CSS 变量循环引用（如 --a: var(--b) 且 --b: var(--a)）的处理是静默失败：不报错，也不计算，最终值为空字符串。在控制台执行 getComputedStyle($0).getPropertyValue('--a')，若返回 ""（空字符串），而非预期值或 "initial"，极可能是循环引用导致未定义。
注意：该方法只能检测变量是否“有值”，不能直接定位哪两个变量互引；需配合手动排查链路。
- 先从出问题的样式属性反推变量名（例如
color: var(--text-color)→ 查--text-color） - 再查该变量定义处是否用了
var(--xxx)，接着顺藤摸瓜查--xxx的定义 - 遇到
var(--y)→var(--z)→var(--y)这类闭环，就确认是循环
在 Styles 面板中观察 var() 是否显示为 “invalid” 或消失
在开发者工具 Elements 面板选中目标元素，切换到 Styles 标签页，找到使用 var() 的那条声明（如 background-color: var(--bg)）。如果该行右侧值显示为 invalid，或整条声明灰掉/不出现，说明变量未成功解析 —— 循环引用是常见诱因之一。
与拼写错误不同，循环引用时变量名本身合法、作用域也正确，但浏览器无法完成求值，因此不会出现在 Computed 面板里对应属性的最终值中。
- 对比正常变量：定义为
--bg: #fff，Computed 中background-color显示rgb(255, 255, 255) - 循环变量：定义为
--bg: var(--fg)且--fg: var(--bg)，Computed 中background-color直接缺失或回退为initial - 不要依赖“是否有删除线”来判断——循环引用不会触发优先级覆盖，而是根本没参与计算
避免 calc() 嵌套 var() 加剧循环风险
calc(var(--a) + var(--b)) 这类写法本身不构成循环，但如果 --a 或 --b 内部存在循环链，整个 calc() 表达式会整体失效（返回 invalid），且无提示。这种复合场景更难定位。
建议拆解验证：把 calc() 拆成独立属性测试，例如先单独设 width: var(--a) 和 height: var(--b)，确认各自可读，再组合。
- 循环变量一旦进入
calc()、clamp()或媒体查询条件（如@media (min-width: var(--breakpoint))），就会导致整条规则被忽略 - 单位缺失（如
--size: 16而非--size: 16px）虽不是循环，但和循环一样造成var()计算失败，需一并检查 - VS Code 或 WebStorm 插件（如 CSS Peek）可跳转变量定义，但无法识别循环；真正可靠的仍是手动追链 +
getComputedStyle()验证
构建时静态分析不现实，必须运行时验证
目前没有任何主流构建工具（Vite、Webpack、PostCSS）能可靠检测 CSS 变量循环引用。CSS 是运行时求值的，且支持 JS 动态注入（如 document.documentElement.style.setProperty('--x', 'var(--y)')），静态扫描必然漏判。
真正可行的做法是在关键组件 mount 后，用脚本批量检查高频变量：
const vars = ['--primary', '--spacing-xs', '--border-radius'];
vars.forEach(name => {
const val = getComputedStyle(document.documentElement).getPropertyValue(name);
if (val === '') console.warn(`⚠️ CSS var ${name} is empty — possible circular reference`);
});
这个检查不能替代人工链路排查，但能快速暴露高风险变量，尤其适合 CI 环境做回归卡点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
