根本原因是变量注入方式、编译器实例复用及文件组织不当；改用 sass-embedded + @use 替代 additionalData + @import 可提速 30%–50%，并需规范 @use 写法、拆分文件、禁用 console.log 等。
根本原因不是用了 Sass，而是变量注入方式、编译器实例复用、以及文件组织方式出了问题。只要改掉 additionalData + @import 的组合，换用 sass-embedded + @use，多数项目能立竿见影提速 30%–50%。
为什么 additionalData 是性能黑洞
它会让 Vite 把同一段变量引入代码（比如 @use "@/styles/variables.scss" as *）拼接到每个 <style lang="scss"></style> 组件头部，再交给 Sass 解析——意味着 80 个组件就重复解析变量文件 80 次，且每次都要重跑整条 @import 链。
- 禁用
additionalData，改用组件内显式@use，Sass 能缓存已解析模块 - 绝对不要在
additionalData里写@import，@use是唯一安全的替代方案 - 若必须全局注入，至少把路径写成绝对路径
@use "src/styles/vars" as v，避免相对路径触发重复解析 - 删掉变量文件里所有
console.log()、未注释的测试代码，Sass 解析器会执行它们
必须切换到 sass-embedded 并启用现代 API
Vite 5.4+ 默认仍用旧版 sass 包，每次编译都启停一个 Dart 进程；sass-embedded 复用长期运行的编译器实例，跳过重复初始化开销。
- 执行
npm uninstall sass && npm install -D sass-embedded - 在
vite.config.js中设置：css.preprocessorOptions.scss.api = 'modern-compiler' - 如果用了
importers（如NodePackageImporter），要从sass改为sass-embedded导入 - 验证是否生效：启动 dev server 后看控制台是否有
[lightningcss]或[sass-embedded]日志
@use 的写法细节决定编译快慢
即使开了 sass-embedded，错误的 @use 写法仍会破坏缓存、拖慢速度。
立即学习“前端免费学习笔记（深入）”；
- 禁止
@use "variables" as *—— 全局污染符号表，让 Sass 无法安全缓存 - 改用具名导入：
@use "tokens" as t，然后写t.$spacing-sm - 按功能拆分文件：
@use "sass:math"、@use "mixins/breakpoints" as bp，避免大一统_all.scss - 检查编译后 CSS 是否含空格选择器（如
.card .title），那是嵌套滥用的信号，会间接拉长 Sass AST 构建时间
真正卡住的往往不是“要不要用 Sass”，而是“怎么组织变量和 @use”。哪怕只多一行 @import 或路径少写一个 /，都可能让热更新延迟从 200ms 拉到 1.5s——这种问题不报错，但每天都在 silently 消耗你的时间。
