必须配置css.preprocessoroptions.scss.additionaldata，通过@use "@/styles/variables.scss" as *;在每个scss文件编译前自动注入，使变量、mixin、function全局可用；js中import无效，因sass变量仅在编译期生效。
直接配 css.preprocessorOptions.scss.additionalData 就行，不是“引入 CSS”，而是让 Sass 编译器在每个 .scss 文件开头自动拼一段代码——变量、mixin、function 才真能用上。
为什么 main.ts 里 import './styles/variables.scss' 没用？
因为那是 JS 层导入：Vite 会把它当普通样式加载进 DOM，但 Sass 编译器根本“看不见”里面的 $color-primary。你在组件 <style lang="scss"></style> 里写 color: $primary-color，编译时仍报 Undefined variable。
-
import是运行时行为，只影响最终 CSS 输出 -
@use/@import是编译期行为，决定变量能否被当前 SCSS 上下文识别 - 真正起作用的只有
additionalData—— 它在编译前就把声明塞进每个文件头部
additionalData 必须写成 @use "@/styles/variables.scss" as *;
Dart Sass（Vite 默认）已弃用 @import，且 @use 不加 as * 会导致变量必须带前缀（如 variables.$primary-color），失去“全局”意义。
- ✅ 正确：
additionalData: `@use "@/styles/variables.scss" as *;` - ❌ 错误：
@import "@/styles/variables.scss";（警告+未来失效） - ❌ 更错：
@use "@/styles/variables.scss";（缺as *，变量不可直用） - 路径必须带引号、以
@/开头、结尾必须有分号（;）——三者缺一，注入即中断
variables.scss 文件里只能放“非输出型”内容
它不是样式文件，是 Sass 模块。一旦混入任何实际生成 CSS 的规则（比如 body { margin: 0; }），就会被重复注入到每个组件的 <style></style> 块中，造成样式冗余、权重冲突，且调试时完全看不出来源。
- ✅ 允许：
$primary-color: #409eff;、@mixin flex-center { ... }、@function px2rem($px) { ... } - ❌ 禁止：
body { ... }、.reset { ... }、@debug "test"（构建可能中断） - 若需全局基础样式（重置、字体等），单独建
base.scss，并在main.ts或App.vue的<style></style>中显式@import
容易被忽略的三个硬性前提
配置写对了，但变量还是用不了？大概率卡在这三处：
- 没装
sass或残留node-sass：pnpm add -D sass并pnpm remove node-sass -
vite.config.ts中resolve.alias没配或配晚了：@必须指向src，且定义要早于css.preprocessorOptions - Vue 单文件组件里写了
<style scoped></style>却忘了加lang="scss"—— 默认是 CSS，SCSS 语法直接被忽略，不报错也不生效
改完配置必须重启开发服务器，热更新不触发 additionalData 重载。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
