sass编译卡顿主因是@import未清理、includepaths含node_modules、additionaldata重复编译；应禁用@import改用@use、关闭sourcemap、显式指定路径、提前编译第三方库、清空缓存。
核心问题就三个：@import没清理干净、includePaths扫了node_modules、additionalData在重复编译全局变量。其他都是表象。
为什么sass --watch一改就卡住几秒甚至十几秒
默认监听会递归扫描整个 node_modules 和 dist 目录，哪怕你只改了 _mixins.scss，它也要重新遍历所有 @use 路径和 @import 依赖图。Dart Sass 解析深层 @forward 链路时，I/O 开销远超语法解析本身。
- 用
--no-source-map关掉源码映射（开发阶段真不需要） - 显式指定输入输出路径：
sass --watch src/scss/main.scss:dist/css/main.css，别用通配符 - 检查
includePaths是否混进了node_modules根目录——这是最常被忽略的性能黑洞 - 第三方库（如
bootstrap/scss/）提前编译成纯 CSS 引入，别让 sass 每次重跑它们
Webpack 里 sass-loader 编译慢还报 Invalid CSS after 错误
这类错误八成不是你写错了语法，而是 sass-loader 版本和底层 Sass 实现不匹配。比如 node-sass@4.x 根本不支持 @use，但你用了，renderSync 阶段直接崩。
- 统一换 Dart Sass：
npm uninstall node-sass && npm install sass --save-dev - 确认
sass-loader≥ 12.0（才完整支持@use和模块化路径解析） -
@use "utils"要求文件名必须是utils.scss；_utils.scss是私有文件，不能被@use直接引用 -
sourceMap: false必须显式配置，否则sass-loader仍可能读取并嵌入 .map 文件
Vue CLI / vue.config.js 里 additionalData 是隐藏性能杀手
用 additionalData 注入 SCSS 变量或 mixin，会让每个 .vue 组件里的 <style lang="scss"></style> 都重新执行一遍完整编译流程。项目有 80 个组件，同一份 variables.scss 就被完整编译 80 次。
- 正确做法：只在
main.js或入口 CSS 文件中@use一次 - 若必须全局可用，抽成仅含
$variables和@mixin的极简文件，不带任何实际样式规则 - 检查
additionalData是否含@warn或条件块——这些在compressed模式下会被静默丢弃，上线后“消失”难排查 - 禁用
@import，改用@use+ 显式路径：@use "@/styles/mixins" as *，不能省略@/或写../mixins
最容易被忽略的是：你以为改了配置就生效，其实 node_modules/.cache 里还躺着旧的解析缓存。提速前先清空缓存目录，再验证 —— 否则测出来的数据全是假的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
