直接@import到组件style中不算全局引入，因其仅在当前块内生效，无法被同组件其他style块或子组件复用；真正的全局需通过vite.config.ts中css.preprocessoroptions.scss.additionaldata统一注入@use路径并配好别名与分号。
为什么直接 @import 到组件里不算“全局引入”
因为每次都要手动写 @import "@/styles/mixins.scss";，既重复又容易漏；更关键的是，@import 是局部作用域——它只在当前 <style lang="scss"></style> 块内生效，无法被同组件内其他 <style></style> 块或子组件复用。真正的全局，是配置一次，所有 lang="scss" 都能直接用 $color-primary 或 @include flex-center。
css.preprocessorOptions.scss.additionalData 必须这么配
这是 Vite 提供的“注入头内容”机制，本质是在每个 SCSS 文件编译前，把字符串拼到最开头。配置错一个字符就全盘失效：
-
additionalData值必须是字符串（不能是数组或对象），且结尾必须带分号;，否则报错Invalid CSS after "variables.scss": expected "}", was ";" - 路径必须用 Vite 别名（如
@/styles/variables.scss），且该别名已在resolve.alias中正确定义，不能写相对路径../../styles/variables.scss - 推荐用
@use "...as *;而非@import：前者兼容 SCSS 5.0+，变量、mixin、function 全部平铺到全局；后者在混用@use的文件中会触发Undefined mixin - 若要注入多个文件，用分号连接：
`@use "@/styles/element-variables.scss" as *; @use "@/styles/variables.scss" as *;`
示例（vite.config.ts）：
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles/variables.scss" as *; @use "@/styles/mixins.scss" as *;`
}
}
}
variables.scss 和 mixins.scss 里只能放什么
它们不是普通样式文件，而是纯 SCSS 模块（module），只定义，不输出 CSS：
- ✅ 允许：
$color-primary: #409eff;、@mixin flex-center { ... }、@function px2rem($px) { ... }、@forward、@use - ❌ 禁止：
body { margin: 0; }、.reset { padding: 0; }、@debug、中文注释、BOM 头、未闭合的/* - ⚠️ 如果需要全局基础样式（重置、字体、通用 class），单独建
base.scss，并在main.ts或App.vue的<style lang="scss"></style>中显式@use或@import
为什么组件里用了变量却报 Undefined variable
常见原因不是配置没生效，而是细节踩坑：
-
<style></style>标签没声明lang="scss"—— 只写<style scoped></style>默认按 CSS 解析，SCSS 语法直接被忽略 -
variables.scss文件本身含非法内容（比如 BOM、中文、@debug），导致整个注入字符串解析失败，Vite 不报具体错误，只让后续所有变量不可用 - Vite 缓存未清除：改完
vite.config.ts后没重启 dev server，或改了variables.scss但没触发热更新（可加console.log("reload")到文件末尾强制刷新） - 路径别名没配对：
@/styles/在vite.config.ts的resolve.alias里指向的是src/assets/styles，但实际文件放在src/styles，路径就断了
最稳妥的验证方式：在任意 <style lang="scss"></style> 里写 div { color: $color-primary; }，看是否编译通过并生效。不生效，就回退检查上述四点。
真正麻烦的不是配置本身，而是错误不报在明面——它静默失效，你得一层层排除变量来源、路径解析、文件编码、缓存状态。建议第一次配完，立刻建个最小 test.scss 文件单独跑通再集成进项目。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
