additionaldata是首选方案，因它在sass/less编译前统一前置拼接代码，确保所有（含scoped）都能访问变量且不污染作用域，避免“undefined variable”等错误。
直接用 css.preprocessorOptions.sass.additionalData 或 css.preprocessorOptions.less.additionalData 注入，是最可靠的方式；其他方法（如在每个 <style></style> 里手动 @import）容易漏、难维护、scoped 下还可能失效。
为什么 additionalData 是首选方案
它不是“运行时注入”，而是在 Sass/Less 编译器读取组件内样式前，把一段 SCSS/Less 代码拼在最前面——所以所有 <style lang="scss"></style>（含 scoped）都能访问变量，且不依赖开发者自觉写 @use 或 @import。
常见错误现象包括：Undefined variable "$primary-color" 报错、:deep() 在 scoped 中突然失效、构建后 @mixin 找不到——这些问题多数源于变量没被提前加载，而非路径或语法写错。
-
additionalData是预处理器层的统一前置，和 JS 模块系统无关，也不受css.modules开关影响 - 它只对
.scss/.less等预处理文件生效，.css文件完全不走这个流程 - 注入内容必须是合法的 SCSS/Less 语法，不能混 JS 或 HTML
additionalData 里该写 @use 还是 @import
Vite 5+ 默认用 Dart Sass，@use 是官方推荐，但要注意命名空间和模块约束；@import 兼容性更好，适合老项目迁移。
典型写法：
css: {
preprocessorOptions: {
sass: {
additionalData: '@use "@/styles/variables.scss" as *;\n'
}
}
}
- 末尾必须加
\n，否则最后一行会和组件内第一行样式连成一句，触发Invalid CSS after "": expected 1 selector or at-rule -
as *表示无前缀使用变量（如直接写$primary-color），但要求variables.scss里不能有@forward冲突，也不能输出顶层样式（即不能有.reset { ... }这类规则） - 若用
@import，写法是'@import "@/styles/variables.scss";\n'；注意别误写成@import "xxx" as x;，Sass 会直接报错 - 路径必须基于项目根目录，
@/别名在additionalData字符串里不解析，得确保resolve.alias已配好，否则要改用path.resolve(__dirname, 'src/styles/variables.scss')
Less 的全局变量配置略有不同
Less 不支持 @use，主要靠 additionalData 或 modifyVars。前者更通用，后者仅适用于纯变量（不能含 @mixin 或嵌套规则）。
推荐统一用 additionalData，写法类似：
css: {
preprocessorOptions: {
less: {
additionalData: '@import "@/styles/variables.less";\n'
}
}
}
- Less 的
math配置（如math: "always"）和additionalData互不干扰，可同时启用 - 如果变量文件里用了
@plugin或@import (optional)，需确认 Less 版本是否支持——Vite 5+ 内置 Less 4.x，基本兼容 - 避免在
additionalData里定义@mixin后立刻调用：定义和调用不在同一编译单元，会报Undefined mixin
容易被忽略的构建陷阱
开发时一切正常，构建后样式出错，大概率是 CSS 提取顺序导致的定义/调用错位。Vite 构建阶段会把所有样式提取合并，而 additionalData 注入的内容虽然“前置”，但无法控制它在最终 style.css 中的物理位置。
- 所有全局
$var、@mixin、@function必须集中在一个入口 SCSS/Less 文件中（如index.scss），再由它统一@use其他模块 - 组件级样式文件（如
Button.module.scss）只写规则，禁止重复定义变量或 mixin - 如果项目启用了
css.codeSplit: true（默认开启），不要指望多个@import能保证执行顺序；用additionalData+ 单一入口文件才是稳解 - 构建时报错含
@debug或@warn？检查被@use的 SCSS 文件，删掉调试语句——它们会在构建时吐日志甚至中断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
