css变量（--xxx）不能通过additionaldata注入，因其属运行时css层，而additionaldata仅作用于sass编译期；必须将:root声明写入纯css文件（如variables.css），并在main.ts中显式import才能生效。
CSS变量（:root自定义属性）不能靠additionalData注入，必须作为普通CSS文件显式导入，否则不会生效。
为什么css.preprocessorOptions.scss.additionalData对CSS变量无效
SCSS变量（如$color-primary）和CSS变量（如--color-primary）是两套完全独立的机制：additionalData只影响Sass编译期，而:root声明属于运行时CSS层，不参与Sass解析。试图用@use "@/styles/variables.scss" as *;去“注入”CSS变量，只会让编译器报错或静默忽略。
-
additionalData字符串里写:root { --c: red; }→ 编译失败（SCSS解析器不认:开头的规则） - 把
:root块放进variables.scss再@use→ 它会被当成普通样式重复注入到每个组件，造成冗余且不可控 - 在
main.ts里import './styles/variables.css'→ 正确路径，但必须确保该文件只含:root和@custom-media等纯CSS声明，不含任何选择器
正确导入全局CSS变量文件的三步操作
真正起作用的方式是把它当作一个标准CSS资源加载，由Vite原生处理：
- 创建
src/styles/variables.css，内容严格限定为：:root { --color-primary: #409eff; --border-radius-base: 4px; } - 在
main.ts（或main.js）最顶部导入：import '@/styles/variables.css' - 确保
vite.config.ts中已配好resolve.alias：{ find: '@', replacement: path.resolve(__dirname, 'src') }
注意：这个文件不能叫.scss后缀，也不能混入.btn { color: var(--color-primary); }这类实际样式规则——否则它就不是“变量定义”，而是“带变量的样式”，会污染全局作用域。
在组件中使用CSS变量的注意事项
CSS变量天然支持动态修改，但使用方式有硬性约束：
- 在
<style></style>里直接用：color: var(--color-primary);→ 必须确保该<style></style>没加scoped，否则:root变量虽可读取，但权重常被覆盖 - 在JS中动态设置：
document.documentElement.style.setProperty('--color-primary', '#ff6b6b')→ 生效立即可见，无需重载 - 在
<style scoped></style>中无法直接响应:root变化？用:deep(.el-button) { color: var(--color-primary); }穿透或改用class绑定 - 第三方UI库（如Element Plus）依赖特定变量名：
--el-color-primary，不是--color-primary，得按文档查准
容易被忽略的关键点
最常卡住的地方不是配置本身，而是文件内容和加载时机：
-
variables.css里写了body { margin: 0; }→ 它会真正在页面上生效，且无法被scoped隔离，导致全局污染 - 在
App.vue的<style></style>里@import '@/styles/variables.css'→ 不推荐，HMR可能失效，且不如main.ts导入稳定 - 用了
postcss-custom-properties插件却没配postcss.config.js→ 变量无法降级到IE，但现代项目通常不需要 - 变量名含非法字符，比如
--my-color!或--123start→ 浏览器直接忽略，控制台无报错
真正要盯住的，是variables.css是否干净、导入是否在main.ts最前、别名是否生效——其他都是衍生成果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
