根本不是浏览器不支持，而是变量未进入作用域链；:root仅匹配无[data-v-xxx]属性的<html>节点，故在<style scoped>中定义会被浏览器忽略，必须在public/index.html的<style>或非scoped CSS中声明。
为什么 :root 里的 CSS 变量在组件里用 var(--x) 没反应
根本不是浏览器不支持，而是变量压根没进作用域链。Vue 的 <style scoped> 会把所有选择器加 [data-v-xxx] 属性，但 :root 是伪类，只匹配无该属性的 <html> 节点——所以写在 scoped 样式里的 :root 声明会被浏览器直接忽略，DevTools 的 Styles 面板里都看不到。
常见错误包括：
- 在
App.vue或任意组件的<style scoped>中定义:root { --color: red; } - 在
public/index.html中漏写<style>:root{...}</style>，或写了但被其他脚本覆盖 - 变量文件（如
variables.css）是通过异步import加载的，首次渲染时还没注入
验证方式：打开 DevTools → Elements → 点击 <html> → 在 Styles 面板搜索 --color，若没出现，说明变量根本没加载成功。
additionalData 注入 SCSS 变量后，var(--x) 仍解析成空字符串
SCSS 变量（如 $primary-color）和 CSS 变量（--primary-color）是两套体系，不能混用。你在 additionalData 里用 @use 注入的是编译期变量，它不会自动变成运行时 CSS 变量。
立即学习“前端免费学习笔记（深入）”；
必须显式用插值语法输出：
- ✅ 正确：
--primary-color: #{$primary-color}; - ❌ 错误：
--primary-color: $primary-color;（报错或原样输出） - ❌ 错误：
--primary-color: var(--primary-color);（循环引用，无效）
另外注意：variables.scss 文件里不能含任何 CSS 规则（如 body { margin: 0 }），否则会被重复注入到每个组件样式中，导致冲突或爆炸式体积增长。
Vite 构建后 CSS 变量失效，但开发环境正常
问题通常出在构建路径或注入时机。Vite 构建时不会运行开发阶段的 HMR 监听逻辑，如果 additionalData 里的 @import 或 @use 路径用了别名（如 @/styles/variables.scss），而 resolve.alias 没在构建上下文中生效，就会静默失败。
关键检查点：
- 确保
vite.config.ts中resolve.alias正确定义了@指向src - SCSS 注入必须用
css.preprocessorOptions.scss.additionalData，不是sass（Vite 把两者当不同预处理器） - 构建时若用
path.resolve()，务必以__dirname为基准，避免process.cwd()在 CI 环境中指向错误目录 - monorepo 项目中，
__dirname指向当前包的配置文件目录，不是 workspace 根目录，路径需据此调整
Element Plus 主题色改了 :root 却没变蓝按钮
因为 element-plus/dist/index.css 已把 --el-color-primary 硬编码为 #409eff，浏览器读的是十六进制值，根本不去查 :root。删掉 import 'element-plus/dist/index.css' 后仍无效，大概率是以下某个环节漏了：
- 没关掉
unplugin-element-plus的useSource: false（默认走 dist，绕过你的 SCSS 编译） -
unplugin-vue-components和unplugin-auto-import的ElementPlusResolver都要配importStyle: 'sass'，漏一个就回退到 dist CSS - DevTools 里看到
--el-color-primary值，但按钮背景色来源是theme-chalk/index.css—— 这说明你仍被编译后 CSS 锁死 -
el-date-picker面板、el-select-dropdown高亮条等组件内部混用硬编码色值，var()无法穿透，得靠::v-deep或局部 SCSS 覆盖
真正容易被忽略的是：变量声明成功 ≠ 所有组件响应变化。有些样式路径绕过了变量体系，得靠开发者主动补位，而不是指望“改了 :root 就万事大吉”。
