必须配置css.preprocessoroptions.scss.additionaldata，因为scss变量和混合宏仅在编译期生效，vite通过additionaldata在每个.scss文件开头自动注入@use语句，确保作用域正确且scoped样式可用。
必须配 css.preprocessorOptions.scss.additionalData，否则所有 @mixin 和 $variable 在组件 <style lang="scss"></style> 里都会报错。
为什么 additionalData 是唯一靠谱的入口
SCSS 变量和混合宏只在编译期起作用，运行时 JS 里 import '@/styles/variables.scss' 完全无效——它只是把文件当普通 CSS 加载，不参与 Sass 作用域构建。Vite 的 additionalData 才是真正让每个 .scss 文件开头自动拼上一行导入语句的机制，连 scoped 样式块都能生效。
常见误操作包括：
- 在
vite.config.ts里错配到css.preprocessorOptions.sass（那是给.sass缩进语法用的，不是.scss） - 用
@import而非@use ... as *，Dart Sass 已弃用前者，且未来版本会彻底移除 - 路径写成
./src/styles/mixins.scss，没走@/别名，导致解析失败
additionalData 字符串必须严格满足三要素
哪怕漏一个字符，注入链就断了，变量报 Undefined variable 或编译直接失败。检查这三点：
- 路径以
@/开头，且确保vite.config.ts中resolve.alias已正确定义：{ find: '@', replacement: path.resolve(__dirname, 'src') } - 末尾带分号
;，否则下一行样式内容会被当成同一行 SCSS 解析，报unexpected token - 字符串用反引号包裹，内部路径加双引号：
`@use "@/styles/mixins.scss" as *;`
错误示例：@use "@/styles/mixins.scss" as *（缺分号）、@use "@/styles/mixins"（缺扩展名）、@use "src/styles/mixins.scss" as *;（没 @/）
mixins.scss 和 variables.scss 文件内容有硬约束
它们不是普通样式文件，而是纯“定义容器”。只要混入任何一行实际输出的 CSS 规则，就会被重复注入到每个组件样式块中——调试时根本看不出来源，但打包后体积暴涨、权重混乱。
✅ 允许的内容：
$color-primary: #409eff;@mixin flex-center { display: flex; justify-content: center; align-items: center; }@function px2rem($px) { @return $px / 16 + rem; }-
@use 'sass:math';（前提是该模块本身也不输出 CSS）
❌ 禁止的内容：
body { margin: 0; }.reset { padding: 0; }-
@debug "loaded";（开发时会吐一堆日志，构建可能中断）
如果项目同时用 SCSS 和 Less，配置不能共用
Vite 把 scss 和 less 当作两个独立预处理器，additionalData 必须分别配在各自字段下：
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles/variables.scss" as *;`
},
less: {
additionalData: `@import "@/styles/variables.less";`
}
}
}
只配 scss 字段，.less 文件不会获得任何变量；反之亦然。别指望一个配置覆盖全部。
真正容易被忽略的，是 variables.scss 里那行看似无害的 .btn { color: $primary; } —— 它不会报错，但会让每个组件的样式都多出这段代码，上线后才发现 CSS 体积翻倍、选择器权重莫名升高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
