Vite通过additionalData在每个SCSS文件编译前自动注入@import或@use语句，使全局mixin、变量可在任意<style lang="scss">中直接@include或使用，无需重复导入；路径需配合@别名，且必须为字符串、结尾带分号。
能直接在任何 <style lang="scss"> 块里用 @include，不用写 @import —— 关键是靠 Vite 或 Vue CLI 的预处理器配置注入，不是靠 import 语句。
Vue3 + Vite：改 vite.config.js 的 css.preprocessorOptions.scss.additionalData
这是最主流、最干净的做法。Vite 会在每个 SCSS 文件编译前，自动把指定内容拼到开头。
-
additionalData必须是字符串，且结尾要带分号（;），否则会报Invalid CSS after "...variables.scss": expected "}", was ";"类错误 - 路径要用
@/styles/mixins.scss这种别名写法，前提是已在resolve.alias中配了@指向src - 如果混入文件里用了
@use（比如引入 Sass 模块系统），就得用@use "xxx" as *，不能混用@import和@use，否则会报Undefined mixin - 示例配置片段：
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/styles/mixins.scss";`
}
}
}
Vue3 + Vue CLI：改 vue.config.js 的 css.loaderOptions.sass.additionalData
和 Vite 配置逻辑一致，只是 key 路径不同。注意 Vue CLI 默认用的是 sass（不是 scss）作为 loader 名。
- 旧版 Vue CLI 可能识别
prependData，但新版统一推荐用additionalData - 路径写法同样依赖
@别名，若没配 alias，得用相对路径如../src/styles/mixins.scss，但容易因组件所在层级不同导致路径错乱 - 如果项目同时用了
sass和scss后缀，确保 loader 选项对应正确 ——sass对应.sass文件，scss对应.scss文件；混入一般放.scss，所以配sass还是scss得看实际 loader 名 - 常见错误：
Error: Undefined variable "$primary-color"，大概率是additionalData路径不对或文件本身语法有误（比如漏了;）
为什么不能只靠 main.js 里 import './styles/mixins.scss'？
这样导入只对 CSS 生效，不参与 SCSS 编译上下文 —— 你在组件里写 @include flex-center 时，Sass 编译器根本“看不见”那个混入定义。
立即学习“前端免费学习笔记（深入）”；
-
import是 JS 层行为，把样式规则塞进 DOM；而@include是 Sass 编译期行为，必须在编译前让所有 SCSS 文件共享同一作用域 - 哪怕你写了
@import "@/styles/mixins.scss"在某个组件的<style>里，也只是局部生效；全局注入的目标是“每个组件都隐式拥有”，省掉重复写这行 - 如果混入里用了
@function或$variable，仅靠 JS import 完全无效，编译直接报错
混入文件本身要注意什么？
它不是普通 CSS，而是纯 Sass 声明体 —— 不要写任何最终输出的样式规则（比如 body { margin: 0 }），否则会被重复插入 N 次。
- 只放
$var、@mixin、@function、@forward、@use - 避免循环依赖：比如
A.scss@use了B.scss，而B.scss又反过来@useA.scss，会导致编译卡死或报Circular dependency - 命名建议加前缀，比如
@mixin _flex-center()或@mixin u-flex-center()，避免和第三方库混入冲突 - 如果用了
@use引入其他模块（如@use "sass:math"），必须放在文件顶部，且不能被@import混用
真正麻烦的不是配置本身，而是混入定义和使用之间的编译时隔离 —— 一旦漏掉 additionalData 或路径写错，错误信息往往指向具体组件里的某行 @include，而不是配置文件，排查时容易绕远。
