必须用@use "@/styles/variables.scss" as *;，且路径带引号、末尾有分号、alias已正确定义、variables.scss仅含变量/混合器/函数（无CSS规则），四者缺一不可；漏分号、相对路径、含CSS规则或@use缺as *均导致静默失效。
必须用 @use "@/styles/variables.scss" as *;，且路径、分号、别名、文件内容四者全对才生效；写错任何一处，变量就“消失”，控制台还不报错。
为什么 additionalData 不生效？先查这三处
90% 的配置失败不是因为 Vite 版本或插件问题，而是注入链被破坏了：
-
additionalData字符串末尾漏了分号（;）——SCSS 解析器会把下一行组件样式拼进来，直接编译失败 - 路径用了相对路径（如
"./src/styles/variables.scss"），但resolve.alias没配，或配在css配置之后，导致路径解析失败 -
variables.scss文件里写了body { margin: 0; }这类 CSS 规则——它会被重复注入到每个<style lang="scss"></style>块中，不报错，但所有组件样式都会多出一段冗余代码，调试时根本看不出来源
@use 和 @import 到底怎么选？
必须用 @use "@/styles/variables.scss" as *;，不能用 @import：
-
@use ... as *;→ 变量（如$primary-color）、@mixin、@function全部平铺进当前作用域，可直接使用 -
@use "@/styles/variables.scss";（缺as *）→ 变量得写成variables.$primary-color，失去“全局”意义 -
@import "@/styles/variables.scss";→ Dart Sass 已弃用，控制台报警告，未来版本将彻底移除；且无法正确处理模块依赖关系
路径、别名和依赖缺一不可
配置本身只是一行字符串，但它依赖三个底层支撑点同时成立：
-
sass必须安装为devDependency：pnpm add -D sass（不是node-sass，已废弃） -
vite.config.ts中resolve.alias要早于css.preprocessorOptions定义，且确保@指向src根目录 -
additionalData的路径必须带引号、以@/开头、结尾带分号——三者缺一都会让注入逻辑中断
variables.scss 文件里只能放什么？
它不是普通样式文件，是纯模块（module），只定义，不渲染：
- ✅ 允许：
$color-primary: #409eff;、@mixin flex-center { }、@function px2rem($px) { } - ❌ 禁止：
body { margin: 0; }、.reset { padding: 0; }、@debug "test";、中文注释、BOM 头、未闭合的/*
真正容易被忽略的，是 variables.scss 里混入了任何一行实际输出的 CSS 规则——它不会报错，但会让所有组件样式多出一段重复代码，调试时根本看不出来源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
