css变量在生产环境“突然失效”，90%不是浏览器不支持，而是变量压根没被解析出来——它卡在构建、注入或作用域环节，连进入渲染流程的机会都没有；检查构建产物中是否残留var(--x)或--x声明是最快速判断依据。
直接说结论：CSS变量在生产环境“突然失效”，90%不是浏览器不支持，而是变量压根没被解析出来——它卡在构建、注入或作用域环节，连进入渲染流程的机会都没有。
检查构建产物里是否还残留 var(--x) 或 --x 声明
这是最快速的判断依据。打开生产环境页面，查看 Network 面板加载的 CSS 文件（如 main.css），搜索 var(-- 或 --primary-color：
- 如果搜到
color: var(--primary-color);—— 说明 CSS 变量未被 JS 动态注入，或内联 style 被错误使用（style="color: var(--x)"永远无效） - 如果搜到
:root { --primary-color: #1890ff; }但元素没生效 —— 问题出在作用域或覆盖上 - 如果搜不到
--x任何声明 —— 构建时变量文件根本没被打包进去，比如variables.css被 PurgeCSS 误删，或 Vite 的additionalData路径写错导致@import静默失败
Vite / Webpack 中 additionalData 注入变量时路径必须绝对
很多人用 additionalData: `@import "@/styles/variables.less";`，看着没错，实则失效——Less 引擎不认识 @/ 别名，@import 直接跳过，不报错也不加载。
- 正确写法必须用
path.resolve()：additionalData: `@import "${path.resolve(__dirname, 'src/styles/variables.less')}";` - 确保
variables.less顶部加一句@debug "loaded";，启动 dev server 时控制台没输出，就证明它根本没被 Less 加载 - 别和
modifyVars混用：二者逻辑冲突，additionalData注入的变量优先级更高，modifyVars定义的同名变量会被忽略
:root 在 Vue <style scoped></style> 里完全无效
Vue 的 scoped 机制会给所有选择器自动加 [data-v-xxx] 属性，而 :root 是伪类，只匹配无属性的 元素，结果就是整段声明被浏览器直接忽略。
- 错误写法：
<style scoped> :root { --c: red; } </style>—— DevTools 的 Styles 面板里根本看不到这条规则 - 正确方式只有两种：
public/index.html的里直接写<style>:root { --c: red; }</style>，或在main.js最顶部import '@/styles/variables.css'（该文件不能带scoped） - 若用异步路由，确保
variables.css是同步加载的——否则组件先渲染，var(--c)解析为unset，表现就像“突然失效”
变量被更高优先级规则或运行时主题覆盖
CSS 变量本身不参与优先级计算，但它的引用者（比如 .btn { color: var(--c); }）会。一旦有更具体的选择器或 !important 规则出现，你的变量值就白定义了。
- Ant Design v5+ 默认启用 CSS-in-JS，
ConfigProvider theme=会重写所有组件的--ant-primary-color，且优先级高于你写的普通 CSS - 检查 Elements 面板中目标元素的
color属性来源：是来自antd.min.css？还是styleattribute？或者ConfigProvider注入的style标签？ - 想彻底交由 Less 控制，需显式关闭：
theme={{ cssVar: false }}，否则变量只是“存在”，但从不生效
最容易被忽略的是：变量定义位置和读取位置不匹配。比如你在 :root 定义了 --c，但 Ant Design 组件实际读的是其父容器上的 --c；又或者 Web Components 里没写 :host { --c: inherit; }，变量就传不进去。这类问题不会报错，也不会出现在 DevTools 的 computed 里，只能靠逐层 inspect 父节点的 styles 才能发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
