90%的sass编译失败源于sass未正确安装、@use语法不合法或sass-embedded在windows下安装不全；additionaldata注入变量报错主因是末尾缺分号、混用@import与@use、或vars.scss中误写css规则。
直接说结论：90% 的 Sass 编译失败不是配置写错，而是 sass 没装对位置、@use 语句写得不合法，或者 sass-embedded 在 Windows 下根本没装全。
为什么 additionalData 注入变量后还报 Undefined variable
根本不是路径写错了，而是注入的 SCSS 代码被解析器当成非法语句——最常见的是漏分号、混用 @import 和 @use、或变量文件里写了实际 CSS 规则。
-
additionalData字符串末尾必须带分号：@use "@/styles/vars.scss" as *;，少一个分号，下一行样式就会被拼进这行里，直接编译失败 -
vars.scss文件里只能有$xxx、@mixin xxx、@function xxx，不能出现body { }这类 CSS 规则，否则每个组件都会重复输出一遍 - 别在
additionalData里写多条@use，比如@use "@/styles/a.scss" as *; @use "@/styles/b.scss" as *;—— Dart Sass 不允许重复as *，应合并到一个入口文件再统一@use - 确保
vite.config.ts中resolve.alias已正确定义@指向src，且该配置出现在css.preprocessorOptions.scss之前
Windows 下启动就报 Embedded Dart Sass couldn't find the embedded compiler executable
这不是你配错了，是 sass-embedded-win32-x64 没真正装进去。npm/pnpm 安装时静默跳过可选依赖，尤其在非管理员权限下更常见。
- 删掉
node_modules和锁文件（package-lock.json或pnpm-lock.yaml） - 用**管理员权限**打开终端，再执行
pnpm install（或npm install） - 检查
node_modules/sass-embedded-win32-x64/下是否存在dart-sass.exe；没有就说明安装失败 - 不想折腾？卸载
sass-embedded，改用标准sass：pnpm remove sass-embedded && pnpm add -D sass
装了 sass 还提示 Preprocessor dependency "sass" not found
说明它被装进了 dependencies 而不是 devDependencies。Vite 只在开发阶段调用预处理器，运行时不需要。
- 运行
pnpm ls sass，确认输出里显示的是devDependencies；如果显示dependencies，就是装错了位置 - 重新安装：用
pnpm add -D sass（yarn add -D sass或npm install --save-dev sass） - 绝对别装
node-sass——它已废弃，API 不兼容 Vite，且不支持@use - Vite 6+ 默认只认
sass（即 Dart Sass），不会 fallback 到其他实现
Sass 升级后大量出现 Using / for division 警告
这不是错误，但未来版本会变成编译失败。Dart Sass 从 1.70.0 起废除了 / 的隐式除法行为，必须显式调用 sass:math 模块。
- 在用到除法的 SCSS 文件顶部加：
@use "sass:math";，然后把$px / $rem改成math.div($px, $rem) - 不想逐个改？跑迁移工具：
npx sass-migrator division **/*.scss - 别靠
silenceDeprecations: true长期掩盖——这只是延迟问题，不是解决 - 注意：
additionalData注入的@use语句不自动透传到每个文件，每个用到除法的 SCSS 文件都得自己加@use "sass:math"
最容易被忽略的点是：additionalData 看似只是字符串拼接，实则要求语法完全合法——路径要能被 alias 解析、引号不能少、分号不能漏、as * 不能缺，任何一个字符错，整个组件的样式都会编译失败，且错误提示往往不指向真实原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
