--style=compressed仅删除空格、换行和注释，不合并重复声明、不剔除未用选择器、不简写属性，真正体积膨胀源于源码结构失控（如@extend爆炸、深层嵌套）及默认开启的sourcemap（增加80–150kb），需配合postcss才能实现深度压缩。
compressed模式只删空格，不减语义体积
你看到的“压缩后还是很大”，不是--style=compressed失效，而是它根本没打算解决这个问题。--style=compressed只做三件事：删空格、删换行、删注释。它不会合并重复声明（比如 20 处font-weight: 600仍保留 20 次），不会剔除未用选择器，也不会把margin-top: 10px; margin-right: 5px;简写成margin: 10px 5px 0 0;。真正膨胀的源头在 Sass 源码结构里。
sourceMap 默认开启，直接加 100KB+ 到 CSS 文件末尾
这是最常被忽略的体积暴增点。Dart Sass 默认启用sourceMap，它会把原始 SCSS 内容 base64 编码后追加到编译出的 CSS 文件末尾。一个中等项目轻松多出 80–150 KB，gzip 后也几乎不压缩——因为 base64 是高熵内容。必须显式加--no-source-map，或在 Webpack 的sassOptions里设sourceMap: false。别信“新版默认关闭”这种说法，Dart Sass 当前稳定版（v1.82.0）仍默认true。
@extend 和深层嵌套是真正的体积炸弹
一个@extend %btn-base在 5 个不同上下文里调用，就会生成 5 条独立规则：.header .btn、.modal .btn、.sidebar .btn……而不是复用同一份声明。嵌套超过 3 层（如.card { .list { .item { &:hover { } } } }）会产出.card .list .item:hover这种 4 级后代选择器，既冗长又不可复用。运行grep -o "margin:" main.css | wc -l，如果数字远高于组件数，基本就是嵌套或@extend失控了。
PostCSS 不会自动接上 Sass 的输出流
很多人以为配了cssnano就万事大吉，但 Sass 命令本身不调用任何 PostCSS 插件。sass --style=compressed输出的仍是“语义完整但格式紧凑”的 CSS，而cssnano的mergeLonghand、discardDuplicates等能力，只有在 PostCSS 管道里才能生效。必须分两步：先用sass输出（推荐--style=expanded，更利于 PostCSS 解析嵌套和自定义属性），再交给postcss-cli或 webpack 的postcss-loader处理。漏掉这一步，等于只做了半程压缩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
