CSS自定义属性渲染生效但Chrome DevTools提示未定义问题求解

成因说明 #

这是Chrome DevTools的已知bug，不会影响实际页面渲染效果，核心原因如下：

• 90~105版本区间的Chrome DevTools，对跨样式表引用的CSS自定义属性检测逻辑存在缺陷：样式面板的悬停校验只会在当前样式表内部查找变量定义，不会跨样式表遍历全局作用域的变量，而浏览器实际渲染时会合并所有样式表中:root根元素的自定义属性定义，所以会出现渲染正常但工具误报未定义的情况。
• 若你使用了@layer层叠规则、异步加载样式表，DevTools的变量检测逻辑可能没有同步到完整的样式表加载结果，也会触发这类误报。

验证方法 #

你可以通过两种方式确认变量确实正常生效：

1. 打开DevTools控制台执行如下代码，会正常输出你定义的颜色值"red"：

getComputedStyle(document.documentElement).getPropertyValue('--myColor')

2. 把主样式表中:root的变量定义复制到次级样式表顶部，再悬停查看样式项，误报提示就会消失。

解决方案 #

这个问题不会影响业务功能，无需修改业务代码，升级到Chrome 106及以上版本即可修复DevTools的误报问题。

内容的提问来源于stack exchange，提问作者Rahul Utb