必须显式设置sassOptions.outputStyle: 'compressed'，因Sass默认为'nested'且不自动适配生产环境；需禁用sourceMap、清理additionalData中的@debug/@warn，否则体积优化事倍功半。
必须显式设 sassOptions.outputStyle: 'compressed'
Webpack 项目里，sass-loader 默认输出是 'nested'，不是生产友好的压缩格式。哪怕你配了 CssMinimizerPlugin，它也只能在 Sass 已经输出的冗余 CSS 上“二次压”，效果打折。
配置位置必须精准：
• Vue CLI：写在 vue.config.js 的 css.loaderOptions.sass.sassOptions
• Webpack：写在 module.rules 中对应 sass-loader 的 options.sassOptions
错写到顶层或 optimization.minimizer 下，完全无效。
务必关掉 sourceMap: false
开启 sourceMap 会让 base64 编码的映射内容直接追加在最终 CSS 文件末尾，中等项目轻松多出 80–150 KB。这不是“调试开销”，是体积暴增主因。
• dart-sass 新版默认 true，别信“默认适合生产”这种说法
• MiniCssExtractPlugin 不会帮你关掉它，它只管提取文件，不干预 sass-loader 是否注入 map
• 开发时用 Webpack 的 devtool: 'source-map' 足够定位样式，不需要 CSS 层 sourcemap
additionalData 里别留 @debug 和 @warn
这些指令在 compressed 模式下会被静默丢弃，你本地构建能看到日志，上线却毫无痕迹，容易误判逻辑失效。
更隐蔽的风险是：如果 additionalData 里塞了大量注释、未用变量或冗余 @import，它们全都会进编译上下文，最终保留在输出里。
安全做法：
• 把调试逻辑抽成单独的 _debug.scss，仅在开发环境 @use
• 或用条件包裹：@if $env == 'dev' { @debug 'xxx' }
• 生产构建前手动清理或用脚本扫描 @debug/@warn
压缩只是“瘦脸”，不是“抽脂”
outputStyle: 'compressed' 只删空格、换行、注释和冗余分号，它不会：
• 合并重复规则（比如 23 次 display: flex 还是 23 次）
• 剔除未用选择器（.unused-class 照样在）
• 处理 @extend 泛滥或 @import 全量拼接带来的语义膨胀
真正卡体积的，是源码结构问题——嵌套过深、工具类泛滥、循环生成原子类没裁剪。压缩插件再强，也救不了源头失控的 SCSS。
立即学习“前端免费学习笔记（深入）”；
