SCSS 编译后 CSS 文件过大，主因是 sass-loader 默认 outputStyle: 'nested'，需显式设为 'compressed'；同时禁用 sourceMap 并清理 additionalData 中的调试语句，再配合 postcss-loader 和 css-minimizer-webpack-plugin 才能有效压缩。
SCSS 编译后 CSS 文件过大，不是 postcss-loader 或 css-minimizer-webpack-plugin 没起作用，而是 sass-loader 默认输出 expanded 格式，已经“胖”了一轮——必须先让 Sass 层压缩，再交给后续工具精简。
sass-loader 必须显式设 outputStyle: 'compressed'
sass-loader 本身不压缩，outputStyle 是唯一控制原始输出格式的开关。默认值是 'nested'（开发友好），不是 'compressed'。即使你配了 css-minimizer-webpack-plugin，它只能处理已生成的 CSS 字符串，无法回溯重编译 SCSS。
- 配置位置：必须写在
css.loaderOptions.sass.sassOptions下（Vue CLI）或module.rules.use[loaderIndex].options.sassOptions（原生 Webpack） - 错误写法：
sassOptions: { outputStyle: 'compressed' }放在顶层或loaderOptions外，会被忽略 - 验证方式：临时把
outputStyle改成'expanded'，看编译出的 CSS 是否突然变大、带换行和缩进
禁用 sourceMap 避免体积膨胀
开启 sourceMap 会让每个 SCSS 文件生成对应 map 内容，嵌入到最终 CSS 底部（base64 编码），动辄增加几十 KB。生产环境几乎不需要它参与 CSS 压缩流程。
- 明确设
sourceMap: false，别依赖某些版本的默认行为（比如 node-sass@7+ 默认true） - 如果项目需要调试，建议只在 dev 环境开启，并通过
devtool: 'source-map'让 JS 层 sourcemap 覆盖样式定位需求 - 注意：MiniCssExtractPlugin 在 production 下默认不生成 sourcemap，但 sass-loader 层仍可能注入，所以必须关掉
慎用 additionalData 注入调试语句
当你用 additionalData 注入全局变量或 mixin 时，如果里面含 @debug 或 @warn，它们会在 compressed 模式下被静默丢弃——你本地开发看到日志，上线却没反应，误以为逻辑失效。
立即学习“前端免费学习笔记（深入）”；
- 生产构建前清理所有
@debug/@warn，或用条件判断包裹：@if $env == 'dev' { @debug 'xxx' } -
additionalData内容本身不参与压缩，但若含大量注释或未使用的占位样式，也会被保留进输出 - 推荐做法：把全局变量抽成独立
_variables.scss，用@import引入，而非字符串拼接注入
postcss-loader 和 css-minimizer-webpack-plugin 不可省略
仅靠 sass-loader 的 compressed 输出还不够：它不删冗余规则、不合并重复选择器、不处理浏览器前缀。这些得靠 postcss 生态完成。
-
postcss-loader必须在sass-loader之后、css-loader之前（顺序：sass → postcss → css） -
css-minimizer-webpack-plugin要启用，且配置minimizerOptions指向cssnanopreset，否则 Webpack 5+ 默认只做基础空格压缩 - 常见漏配：只装了
postcss-loader却没建postcss.config.js，或插件列表里漏掉cssnano
真正卡住压缩效果的，往往不是某个插件没装，而是 sassOptions.outputStyle 没生效、sourceMap 暗中膨胀、或 additionalData 里藏了干扰项——这三处改完，CSS 体积通常能直接砍掉 30%～50%。
