预处理器变量（编译期）与CSS自定义属性（运行时）必须分离；SCSS需通过additionalData配置@use全局注入，Less则推荐sass-resources-loader；变量与CSS规则不可混写，改配置后须重启服务。
预处理器（Sass/SCSS、Less）本身不支持直接在 CSS 规则中使用 $var 或 @var，所以所谓“引入全局 CSS 变量文件”，实际要分清两层：一是让预处理器变量（编译期）全局可用；二是让 CSS 自定义属性（--var，运行时）真正生效。混淆这两者是 90% 配置失败的根源。
SCSS 中必须用 additionalData + @use as *
在 Vite 或 Vue CLI 项目中，仅靠 @import 或在 main.ts 里 import './styles/vars.scss'，无法让 $color-primary 在每个 块里免写 @use 就直接用。
-
additionalData必须配置在css.preprocessorOptions.scss.additionalData，值为反引号包裹的字符串：`@use "@/styles/variables.scss" as *;` - 末尾分号
;不可省——漏了会导致 SCSS 解析器把组件内第一行样式拼进注入内容，报Invalid CSS after "use "@/styles": expected 1 selector - 路径必须走
@/别名，且vite.config.ts中resolve.alias已正确定义到src目录 -
variables.scss文件里只能放声明：变量、@mixin、@function；不能有body { }这类真实 CSS 规则，否则会重复注入到每个组件样式开头
Less 全局变量注入优先选 sass-resources-loader 替代方案
Less 没有官方 additionalData 支持，less-loader 的 globalVars 选项只接受扁平键值对，没法注入混入或嵌套逻辑。真要全局复用，得换路子。
- Webpack 项目（如 Vue CLI 2/3）推荐用
sass-resources-loader（它其实也支持 Less），在build/utils.js或vue.config.js里配resources数组，指向common.less - 不要用
@import方式手动引入——HBuilderX 或某些 Webpack 版本下路径解析不稳定，容易静默失效 - 如果用了
@import且变量未生效，先检查是否被scoped隔离：它只影响选择器作用域，不影响变量加载；但若@import路径错或文件不存在，也不会报错，只会默默跳过
别把 Sass 变量和 CSS 变量混着导出
很多人想“一步到位”：在 variables.scss 里既定义 $color-primary，又用 :root { --color-primary: #xxx } 导出。这会导致两个问题：一是 CSS 规则被重复注入（见上一条），二是 $color-primary 在 :root 里直接写会原样输出成无效 CSS。
- 正确做法是拆开：一个文件（如
_config.scss）只放带!default的 Sass 变量；另一个文件（如export.css.scss）用:root { --color-primary: #{ $color-primary }; }插值导出 - 插值
#{}里不能放未定义变量，否则报Invalid null value for `#{}`；建议在导出前加@debug $color-primary;验证 - 只对需要 JS 动态读写的值导出 CSS 变量（比如主题开关、字号缩放比例），纯编译期计算用的中间变量（如
$color-primary-hover）留在 Sass 层即可
最易被忽略的一点：改完 vite.config.ts 或 vue.config.js 后，必须重启开发服务器——热更新不会重载 additionalData 或 loader 配置，改了等于没改。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
