additionalData注入后变量报Undefined是因注入链被破坏：末尾缺分号、@/别名未配或顺序错、variables.scss含CSS输出规则；必须用@use "@/styles/variables.scss" as *;，且该文件仅允许定义变量/混入/函数，禁止任何CSS输出。
为什么additionalData注入后变量仍报Undefined variable
不是 Vite 版本问题，而是注入链被破坏。SCSS 编译器在每个 <style lang="scss"> 块开头拼接字符串，一旦出错就静默失效。常见原因有三个：
• additionalData 字符串末尾漏了分号（;），导致下一行样式被错误拼进 SCSS 语法，直接编译失败
• @/ 别名没配，或配在 css 配置之后，路径 "@/styles/variables.scss" 解析为 404
• variables.scss 文件里写了 body { margin: 0; } 这类实际输出 CSS 的规则——它会被重复注入到每个组件样式开头，不报错但污染输出、权重混乱
必须用@use "@/styles/variables.scss" as *;，不能用@import
Dart Sass（Vite 默认编译器）已弃用 @import，写它会触发警告并静默忽略。而 @use ... as * 是唯一能真正“平铺”变量到全局命名空间的方式：
• ✅ 正确：@use "@/styles/variables.scss" as *; → 可直接写 $primary-color
• ❌ 错误：@use "@/styles/variables.scss"; → 必须写成 variables.$primary-color，失去全局意义
• ❌ 更错：@import "@/styles/variables.scss"; → 控制台警告，未来版本将移除，且变量无法跨文件复用
variables.scss里只能放定义，不能放任何CSS输出
这个文件不是样式入口，是纯模块（module）。它的内容只参与编译期符号解析，不生成任何 CSS 输出：
• ✅ 允许：$color-primary: #409eff;、@mixin flex-center { ... }、@function px2rem($px) { ... }
• ❌ 禁止：body { margin: 0; }、.reset { padding: 0; }、@debug "test";、中文注释、BOM 头、未闭合的 /*
• 如果需要全局重置或基础样式，请单独建 base.scss，并在 main.ts 或 App.vue 的顶层 <style lang="scss"> 中显式 @use 或 @import
导出纯净 CSS：避免additionalData污染构建产物
additionalData 只对 .scss 和 <style lang="scss"> 生效，对纯 .css 文件完全无效。想导出无冗余、无重复、无注入痕迹的最终 CSS：
• 所有组件级 .scss 文件只写选择器和规则，禁止定义 $var / @mixin / @function
• 所有可复用结构（变量、混入、函数）必须集中在一个入口文件（如 src/styles/index.scss），再由它统一 @use 其他模块
• 构建后检查生成的 CSS 是否含重复的 body { ... } 或 .reset { ... } —— 出现即说明 variables.scss 混入了输出型代码
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的，是variables.scss 里哪怕只有一行实际输出的 CSS 规则，都会让每个组件样式块开头多出一段不可见的重复代码。它不报错，但会让审查元素时看到莫名其妙的样式叠加，调试成本翻倍。 
