直接配置css.preprocessorOptions.scss.additionalData可自动注入全局变量和mixin，避免手动@import导致的语法错误、维护困难、样式权重混乱及IDE补全失效；需注意路径须相对、结尾加分号、variables.scss禁含CSS规则。
直接在 vite.config.js 里配 css.preprocessorOptions.scss.additionalData，就能让所有 .scss 文件（包括 <style lang="scss">）自动获得变量和 @mixin，不用每个文件手动 @import。
为什么不能用 @import 在组件里逐个引入？
手动 @import "./variables.scss" 看似简单，但实际问题很多：
-
<style lang="scss">中的@import是 CSS 层语义，Vite 会把它当普通 CSS 解析，导致语法报错或静默失败 - 每个组件都写一遍，漏一个就用不了变量，维护成本高
- 重复导入可能引发样式权重混乱，尤其当
variables.scss里意外混入了选择器规则时 - VS Code 或 WebStorm 的 SCSS 语言服务无法跨文件识别变量，补全和跳转失效
additionalData 配置必须注意路径和内容规范
这个字段值是字符串，不是对象，且路径必须相对于 vite.config.js，不支持 @/ 别名（CSS 编译层根本不认识它）：
- ✅ 正确写法：
additionalData: '@import "./src/styles/variables.scss";'（结尾分号不能少） - ❌ 错误写法：
additionalData: '@import "@/styles/variables.scss";'（别名无效） - ❌ 错误写法：
additionalData: '@import "./src/styles/variables.scss"'（缺分号，SCSS 解析失败） -
variables.scss文件本身只能含：变量（$color-primary）、@mixin、@function、@forward、@use；禁止出现任何 CSS 规则（如body { }）、@debug、中文注释、BOM 头、未闭合的/*
多个 SCSS 全局文件怎么合并注入？
如果变量、mixin、function 分散在不同文件（比如 variables.scss、mixins.scss、functions.scss），不要拼接多个 @import 字符串——容易出错且难调试。推荐统一入口方式：
立即学习“前端免费学习笔记（深入）”；
- 新建一个
index.scss，只做聚合：@import "variables"; @import "mixins"; @import "functions"; - 确保所有被导入的文件都在同一目录下，且文件名不含
_前缀（否则会被 SCSS 当作 partial 忽略） - 在
vite.config.js中只注入这一个入口：additionalData: '@import "./src/styles/index.scss";' - 这样既能保持结构清晰，又避免了
additionalData字符串过长或顺序错误的问题
最容易被忽略的是：Vite 构建时完全不检查 variables.scss 是否有语法错误，只要它没被任何 @import 或 additionalData 引入，就不会参与编译——也就不会报错。等你发现变量用不了，往往已经改了三四个地方，却忘了检查这个文件本身是否合法。
