compressed模式仅删除空格换行，不解决源码冗余；真正膨胀源于@extend爆炸、嵌套过深、工具类失控、@import全量引入；减体积关键在停用@extend、改用@use、构建阶段加postcss-discard-unused。
compressed 模式本身不解决“文件过大”的根本问题，它只删空格换行；真正让 CSS 膨胀的是源码结构——比如 @extend 爆炸、嵌套过深、工具类生成失控、@import 全量引入。压缩开关只是最后一道“瘦脸”工序，不是“减肥手术”。
为什么开了 --style compressed 还是很大
因为 Sass 的 compressed 输出只是格式压缩：移除缩进、空格、换行、注释，但不会合并重复声明、剔除未用规则、折叠选择器。如果源 SCSS 里写了 100 个 margin 工具类（如 .m-1 到 .m-100），编译后就是 100 条独立规则，compressed 只会让它们挤在一行，体积照旧。
- 检查输出 CSS 中是否大量重复出现同一组声明（如
margin: 0.5rem出现 47 次）——大概率是@extend或循环生成导致 - 运行
gzip -c main.css | wc -c对比压缩前后体积，若 gzip 后仍远超预期，说明内容冗余而非格式冗余 - 确认没开启
sourceMap：它会在文件末尾追加 base64 字符串，直接让体积+100KB+
sass-loader 中正确启用压缩的配置要点
Webpack 项目里，sass-loader 自身不负责压缩，必须通过 sassOptions.outputStyle 显式设为 'compressed'；否则即使后续接 cssnano，Sass 阶段已输出 expanded 格式，浪费了第一轮精简机会。
-
sassOptions必须写在vue.config.js或webpack.config.js的css.loaderOptions.sass下，不能放在顶层 - 禁用
sourceMap：设sourceMap: false，别依赖默认值（某些版本默认true） - 避免和
additionalData冲突：如果用additionalData注入变量，确保它不包含@debug或@warn——这些在compressed模式下会被静默丢弃，调试时容易误判
真正减体积的三件事，比开压缩开关重要得多
压缩只是收尾动作；体积问题必须往前推到 SCSS 编写和构建流程中解决。
- 停用
@extend：尤其别对带伪类（:hover）、媒体查询（@media）、上下文依赖（.card &）的占位符使用。改用 CSS 自定义属性 + BEM 类组合，声明只存一份 - 用
@use替代@import：前者按需引入变量/mixin，后者是全文本拼接。哪怕只调用一个px2rem()，@import也会把整个utils.scss塞进去 - 构建阶段加
postcss-discard-unused：但它必须放在 Sass 编译之后、cssnano之前；且要配content指向所有 HTML/Vue 模板路径，否则会误删 JS 动态插入的类名
最容易被忽略的是：@extend 和 compressed 一起用，反而让 cssnano 失效——因为 cssnano 合并不了分散在不同选择器块里的相同声明。你得先让 Sass 不产出重复内容，压缩才有意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
