SCSS编译失败主因是Dart Sass≥1.70禁用/除法语法，需改用@use "sass:math"后调用math.div($a, $b)，且第三方库如Bootstrap 4.x含旧语法需适配。
SCSS编译失败是因为 Dart Sass 版本升级后禁用了除法语法
Vite 升级（尤其是 v5.0+）会自动拉取新版 sass（Dart Sass ≥1.70），而该版本彻底移除了旧式除法写法（如 $width / 2），直接报 invalid css after "/"。这不是路径或配置问题，是语法兼容性断裂。
- 检查报错是否含
invalid css after "/"或expected expression—— 这是典型标志 - 运行
npx sass --version确认本地 Sass 版本：若 ≥1.70，则必须改写除法 - 旧写法
width: $col / 12;必须改为width: math.div($col, 12);（需先@use "sass:math";） - 第三方 SCSS 包（如 Bootstrap 4.x、旧版 uView）大概率含此类语法，不能直接升级后照用
vite.config.ts 中的 additionalData 配置突然失效
additionalData 在 Vite 升级后仍生效，但作用方式变了：它只注入到每个 SCSS 文件开头，不改变模块作用域规则。如果你原来用 @import 全局混入变量，升级后改用 @use，就可能因命名空间隔离导致变量“看不见”。
- 原配置
additionalData: '@import "@/styles/vars.scss";'→ 仍可用，但@import已被 Sass 官方弃用，部分新版本会警告 - 新推荐写法
additionalData: '@use "@/styles/vars.scss" as *;'→as *才能暴露变量供直接使用；漏掉as *就只能写vars.$primary - 如果
vars.scss里用了@use "sass:math"，additionalData不会自动把它带进其他文件——每个文件仍需自己@use "sass:math" - Vite 5.3+ 对
@/别名解析更严格，确保vite.config.ts中已配好resolve.alias，否则@use "@/styles/vars.scss"会报路径找不到
node_modules 中 sass-embedded-win32-x64 缺失可执行文件
Vite 5.0+ 默认依赖 sass-embedded（而非纯 JS 的 sass），它需要平台匹配的二进制可执行文件（如 Windows 下的 dart-sass.exe）。升级后若 node_modules 是从别人那里复制来的，或 npm 安装中断过，这个文件极大概率丢失，导致启动时报 Embedded Dart Sass couldn't find the embedded compiler executable。
- 不要手动下载或复制
dart-sass.exe—— 它必须由sass-embedded-win32-x64包在安装时解压生成 - 执行
npm ls sass-embedded-win32-x64，若无输出，说明未正确安装 - 彻底解决：以管理员身份运行终端，删掉
node_modules和package-lock.json，再运行npm install - 若网络差，可临时设镜像：
npm config set sass_binary_site https://npmmirror.com/mirrors/sass-embedded/
VS Code 的 Easy Sass 插件把 .scss 编译成 .wxss
这不是 Vite 的问题，而是 VS Code 插件干扰。Easy Sass 默认监听保存事件并触发本地编译，若配置里写了 .wxss 格式，它就会覆盖 Vite 的正常流程，造成“样式没变”“热更新失效”等假象。
立即学习“前端免费学习笔记（深入）”；
- 打开 VS Code 设置，搜
Easysass: Formats，确认列表中只有.css和.min.css，删掉任何含wxss的项 - 或者直接禁用 Easy Sass 插件 —— Vite 自身已完整支持 SCSS 编译，无需额外插件参与构建
- 检查文件关联：右下角点击当前文件类型（如 “SCSS”），选 “Configure File Association for '.scss'”，确保不是误设为 “WXSS”
additionalData 注入了 @use，但变量文件里又用了旧除法，同时 sass-embedded 可执行文件还缺着——错误日志只会报最上层那个，得一层层往下扒。 
