90%的Sass全局变量失效源于误配css.preprocessorOptions.sass字段、漏写as *、additionalData末尾缺分号、sass未装入devDependencies，或variables.scss混入CSS规则。
直接结论：Vite 6 中 Sass 全局变量失效，90% 是因为用了 @import、漏了 as *、additionalData 字符串末尾缺分号，或 sass 没装对位置。
为什么 css.preprocessorOptions.sass.additionalData 不生效
这不是 Vite 配置写错了，而是你配错了字段名。Vite 将 .sass（缩进语法）和 .scss（大括号语法）视为两个独立预处理器。绝大多数项目用的是 .scss 文件，但配置却误写在 sass 下：
- ❌ 错误配置入口：
css.preprocessorOptions.sass.additionalData→ 只影响.sass文件，对.scss完全无效 - ✅ 正确配置入口：
css.preprocessorOptions.scss.additionalData→ 所有.scss和<style lang="scss">都走这里 - 别再查“为什么
additionalData不生效”，先确认你改的是scss还是sass字段
additionalData 必须是合法 SCSS 语句，且结尾带分号
additionalData 不是字符串拼接，而是会被 Sass 解析器当作真实代码执行。漏一个分号，下一行样式就会被吞进去，直接报错 expected ";" 或 Invalid CSS after：
- ✅ 正确：
additionalData: `@use "@/styles/variables.scss" as *;`（反引号包裹、路径带引号、末尾严格加分号） - ❌ 错误：
additionalData: `@use "@/styles/variables.scss" as *`（缺分号） - ❌ 错误：
additionalData: "@import '@/styles/variables.scss';"（@import已被 Dart Sass 弃用，Vite 6+ 不兼容） - ❌ 错误：
additionalData: `@use "@/styles/variables.scss";`（缺as *→ 变量锁在命名空间里，必须写成variables.$primary）
路径、别名、依赖三者必须同时成立
@/styles/variables.scss 能不能被解析，不取决于你“觉得”它应该能，而取决于三个底层条件是否全部满足：
立即学习“前端免费学习笔记（深入）”；
-
sass必须安装为开发依赖：pnpm add -D sass（不是node-sass，它已废弃；也不是pnpm add sass，那会装进dependencies） -
vite.config.ts中resolve.alias必须定义且早于css配置：{ "@": path.resolve(__dirname, "src") } -
variables.scss文件里只能有$xxx、@mixin、@function—— 任何一行实际 CSS 规则（如body { margin: 0 }）都会被重复注入到每个组件中，造成样式污染，且不报错
Windows 下 Embedded Dart Sass couldn't find the embedded compiler executable
这不是配置问题，是 sass-embedded 的可选依赖根本没装全。尤其 Windows 下，非管理员权限安装常静默跳过 dart-sass.exe：
- 删掉
node_modules和pnpm-lock.yaml - 用**管理员权限**打开终端，再运行
pnpm install - 检查
node_modules/sass-embedded-win32-x64/dart-sass.exe是否存在 - 不想折腾？卸载
sass-embedded，改用标准sass：pnpm remove sass-embedded && pnpm add -D sass
真正容易被忽略的，是 variables.scss 里混入了哪怕一行真实 CSS 规则——它不会导致构建失败，但会让所有组件样式开头多出一段重复代码，调试时完全找不到来源。
