--style=compressed未显著减小css体积，因其仅删除空格、换行和注释，不合并重复声明、不剔除未用选择器、不简写属性；体积膨胀主因是sourcemap默认开启（增加80–150kb）及源码结构失控（如@extend爆炸、深层嵌套、@import全量引入）。
为什么--style=compressed没让CSS变小？
它确实生效了，但只做三件事：删空格、删换行、删注释。不会合并重复声明（比如 20 处 font-weight: 600 还是 20 次），不剔未用选择器，也不简写 margin-top: 10px; margin-right: 5px; → margin: 10px 5px 0 0;。你看到体积没降，不是参数没起作用，而是它本就不负责这些。
sass 命令行必须加 --no-source-map
sourceMap 默认开启，会把原始 SCSS base64 编码后直接追加到 CSS 文件末尾——中等项目多出 80–150 KB，gzip 几乎压不动。这不是“压缩失败”，是它主动往文件里塞了一大段高熵内容。
- 正确写法：
sass src/main.scss dist/main.css --style=compressed --no-source-map - 别信“新版默认关闭”——Dart Sass v1.82.0（当前稳定版）仍默认
true - 如果用了
--source-map或漏掉--no-source-map，体积暴增几乎必然
Webpack 里 sassOptions 必须写对位置
outputStyle: 'compressed' 不是可选配置，也不是靠 css-minimizer-webpack-plugin 自动触发的。它必须显式设在 Sass 层，且路径不能错。
- Vue CLI：写在
css.loaderOptions.sass.sassOptions下 - 原生 Webpack：写在
module.rules.use[loaderIndex].options.sassOptions里 - 写错位置（比如丢在顶层或
optimization.minimizer里）会被完全忽略 - 验证方式：临时改成
'expanded'，看输出 CSS 是否突然带缩进和空行
压缩只是“瘦脸”，真正要瘦身得靠结构治理
--style=compressed 是最后一道闸门，但膨胀源头在代码里：
-
@extend %btn-base在 5 个上下文调用 → 生成 5 条独立规则，而非复用 - 嵌套超过 3 层（如
.card { .list { .item { &:hover {} } } }）→ 输出.card .list .item:hover这种冗长选择器 -
@import全量引入 → 把整个_utils.scss塞进来，哪怕只用了其中 1 个函数 - 用
@use替代@import，并检查grep -o "margin:" main.css | wc -l，数字远高于组件数就是结构失控信号
真正难的不是加个 --style=compressed，是让每条 CSS 规则都有存在必要。工具能压格式，压不了设计债。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
