sass --style=compressed仅删空格换行注释，不合并重复规则、不剔除未用选择器、不简写数值颜色；真正减体积须源头优化（控嵌套、禁滥用@extend）+postcss二次压缩。
直接用 sass --style=compressed 不能真正减小体积
它只删空格、换行、注释，不合并重复规则，不剔除未用选择器，也不简写数值或颜色。实测开启后 gzip 压缩率提升通常不到 3%，而源码中一个深层嵌套或滥用的 @extend 就能让体积翻倍。别把它当“压缩开关”，它只是格式整理工具。
sass --no-source-map --style=compressed 是上线必加的组合
sourceMap 默认可能开启，会在 CSS 文件末尾追加 base64 编码的源码映射，轻松多出 100KB+。必须显式加 --no-source-map 关闭；--style=compressed 则确保 Sass 阶段就输出紧凑格式，避免后续 PostCSS 工具因解析 expanded 格式产生额外开销。
- 命令行示例：
npx sass src/main.scss dist/main.css --no-source-map --style=compressed - Webpack 中需在
sassOptions.outputStyle显式设为'compressed'，不能依赖 loader 默认值 - 开发时禁用该组合：调试时无法定位原始行号，
@debug和@warn也会被静默丢弃
压缩前体积失控，问题一定出在 Sass 源码结构里
运行 grep -o "\.btn" main.css | wc -l 或 grep -o "margin:" main.css | wc -l 快速识别高频冗余规则。若数字异常高，大概率是以下原因：
-
@extend %button-base被多个上下文调用，生成了.header .btn, .modal .btn, .sidebar .btn这类爆炸式选择器 - 嵌套超过 4 层，比如
.card { .list { .item { &:hover { ... } } } }，每层都复制父选择器前缀 -
@import全量引入大文件（如整个 Bootstrap Sass），哪怕只用了一个px2rem()函数 - 循环生成工具类：
@for $i from 1 through 100 { .m-#{$i} { margin: #{$i}px; } }直接产出 100 条规则
真正有效的压缩链是 Sass → PostCSS → cssnano，不是单靠 CLI 参数
sass 命令本身不调用任何 PostCSS 插件，--load-path 或 --require 对 cssnano 完全无效。必须分两步走：
- 先用
--style=expanded输出可读 CSS（便于 PostCSS 正确解析嵌套和自定义属性） - 再交给
postcss-cli管道处理：postcss dist/main.css -o dist/main.min.css --use autoprefixer cssnano - cssnano 的
mergeLonghand、normalizeWhitespace才能真正简写0px → 0、#ff0000 → #f00、合并重复声明
最容易被忽略的是：Sass 输出阶段没控制好源码结构，后面所有压缩都是徒劳。体积问题不在“怎么压”，而在“什么进了最终 CSS”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
