如何修复Vite中CSS的Sass预处理报错-css教程-PHP中文网

根本原因是dart sass强制启用模块系统，@import被废弃；必须用@use "@/styles/vars.scss" as *;注入，路径需正确、末尾带分号、别名已配置。

如何修复vite中css的sass预处理报错

报错 `[plugin:vite:css] [sass] Undefined variable` 或 `Undefined mixin`

根本原因是 Dart Sass 从 1.70.0 开始强制启用模块系统，@import 被废弃，变量/mixin 不再自动注入全局作用域。

直接在 vite.config.ts 里用 additionalData 注入 @import 已失效；必须改用 @use ... as * 显式暴露命名空间。

additionalData 必须是完整、合法的 Sass 语句，结尾带分号：`@use "@/styles/vars.scss" as *;`（漏掉分号会报 expected ";"）
如果多个文件要全局可用，不能写多条 @use，得合并进一个入口文件（比如 index.scss），再统一 @use 它
as * 是关键——没有它，变量名就得带前缀，如 $colors-primary；加了才能直接用 $primary
别在 additionalData 里混用 @import 和 @use，Dart Sass 会拒绝解析

`Embedded Dart Sass couldn't find the embedded compiler executable`

这是 sass-embedded 的可选依赖没装全，尤其 Windows 下常见。不是配置问题，是 node_modules 缺文件。

Vite

为开发、生产构建和库打包配置并优化 Vite。

下载

先删掉 node_modules 和 package-lock.json（或 pnpm-lock.yaml）
**必须用管理员权限打开终端**，再执行 npm install 或 pnpm install
检查 node_modules/sass-embedded-win32-x64/（Windows）或对应平台目录下是否存在 dart-sass.exe（或 dart-sass 可执行文件）
如果只想要稳定方案，干脆卸载 sass-embedded，改用标准 sass：pnpm remove sass-embedded && pnpm add -D sass

安装后仍提示 `Preprocessor dependency "sass" not found`

常见于依赖被误装到生产环境，或安装命令漏了 -D。

运行 npm ls sass，确认输出里带 devDependencies 字样；如果显示 dependencies，说明装错了位置
重新安装：明确加 --save-dev（npm）或 -D（pnpm/yarn）
别装 node-sass —— 它已废弃，和 Vite 不兼容
Vite 6+ 默认只认 sass（Dart Sass），不识别旧版 API

升级 Sass 后出现 `Using / for division` 警告

这是 Sass 语法变更：/ 不再默认作除法运算符，需显式调用 sass:math 模块。

在用到除法的 SCSS 文件顶部加：@use "sass:math";
把 $px / $rem 改成 math.div($px, $rem)
不想逐个改？用官方迁移工具：npx sass-migrator division **/*.scss
注意：这个警告不影响构建，但未来版本会变成错误；别靠 silenceDeprecations 长期掩盖

最易忽略的点是：vite.config.ts 里的 additionalData 字符串必须语法合法，且 @use 的路径要能被 Vite 的 alias 正确解析（比如 @/ 别名必须已在 resolve.alias 中定义）。路径错、分号漏、alias 缺失，三者任一都会让 @use 失效，最终还是报 undefined。