webpack 5 中 sass 缓存失效主因是未显式配置 sass-loader 的 implementation 和 cache，且 sourcemap、includepaths、additionaldata 等设置不当导致 dart sass 模块缓存完全失效。
Webpack 5 默认不启用 Sass 缓存，且 sass-loader@12+ 若未显式配置 cache 和 implementation，会退化为每次全量解析——这不是“变慢”，是根本没用上 Dart Sass 的模块缓存能力。
检查 sass-loader 是否真的在用 Dart Sass
很多项目看似装了 sass，但 webpack 仍 fallback 到残留的 node-sass 或旧实现：
- 运行
npm uninstall node-sass—— 不留任何旧包，避免 loader 自动降级 - 确认
sass-loader版本 ≥ 12.6：npm list sass-loader - 在
sass-loader的options中必须写死：implementation: require("sass")，不能只靠安装了sass就认为生效 - 验证方式：临时把
@use "sass:math"写进任意 SCSS 文件，若报Invalid CSS after "@use"，说明仍在用node-sass
禁用 sourceMap + 显式设 outputStyle
sourceMap: true 是 Webpack 5 构建中最常被忽略的性能黑洞，尤其在 CI 环境下，它会让每个 SCSS 文件额外读写一次 .map 文件，并 base64 编码拼入输出 CSS：
- 必须显式设
sourceMap: false，位置在sassOptions下（Vue CLI 用户注意：要写在css.loaderOptions.sass.sassOptions里） -
outputStyle默认是'nested'，不是压缩，哪怕配了css-minimizer-webpack-plugin也无用；必须设outputStyle: 'compressed' - 验证是否生效：改
outputStyle: 'expanded'，看输出 CSS 是否突然带大量缩进和空行
清理 additionalData 和 includePaths
additionalData 在 Webpack 5 中的副作用被放大：它会让每个 .vue 文件的 <style lang="scss"></style> 都触发一次独立编译流程，@use 缓存完全失效：
- 删掉
vue.config.js或webpack.config.js中css.loaderOptions.sass.additionalData里的所有@use、@import或大段变量定义 - 把全局变量抽成
variables.scss（去掉下划线），然后在需要的地方显式@use "variables" as v -
includePaths: ["node_modules"]必须删掉——它会让 Dart Sass 每次启动都递归扫描整个node_modules目录，I/O 开销远超语法解析本身
监听范围失控：sass --watch 不等于 webpack watch
很多人在 Webpack 5 里混用 sass --watch 命令，结果监听范围爆炸：
-
sass --watch默认监听整个输入路径及其子目录（含node_modules和dist），Webpack 5 的watchOptions对它完全无效 - 开发时应统一走 Webpack 的
watch，别额外起sass --watch进程 - 如果非要用 CLI，务必指定精确路径：
sass --watch src/scss/main.scss:dist/css/main.css --no-source-map，禁用通配符 - 第三方库（如
bootstrap/scss/）提前编译成纯 CSS 引入，别让它参与 Webpack 的每次依赖图重建
真正卡住的从来不是某一行 @mixin，而是 includePaths 里一个 "node_modules"、additionalData 中一句 @use、或 sassOptions 里漏写的 sourceMap: false——它们让 Dart Sass 的缓存机制彻底失效，退回到 LibSass 级别的暴力解析。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
