--style=compressed不能解决css体积过大问题，它仅删除空格、换行和注释，不合并重复规则、不剔除未用选择器、不简化颜色或calc()值；真正膨胀源于@extend爆炸、嵌套过深、@import全量引入、sourcemap残留及构建链配置错位。
开 --style=compressed 不能解决 Sass 编译后 CSS 体积过大问题——它只删空格、换行、注释，不合并重复规则，也不剔除未用选择器。真正膨胀的源头在源码结构失控和构建链配置错位。
为什么 --style=compressed 压缩后体积几乎不变
因为 --style=compressed 是格式整理工具，不是逻辑压缩引擎：
- 它不会把
.btn { margin: 1rem; }和.card { margin: 1rem; }合并成一条margin: 1rem声明 - 它不会删除 HTML 里根本没出现过的
.m-42类规则 - 它不会简化
#ff0000→#f00或calc(1rem + 2px)→ 实际计算值 - 运行
grep -o "margin:" main.css | wc -l，如果结果远超组件数（比如 >200），基本是@extend或@for循环失控
必须关掉 sourceMap，否则体积暴增
sourceMap: true（默认常开启）会让 Dart Sass 在 CSS 文件末尾追加 base64 编码的源码映射，一个中等项目轻松 +100 KB，gzip 几乎无法压缩高熵内容：
- 命令行编译：显式加
--no-source-map，别信“默认关闭” - Webpack：在
css.loaderOptions.sass.sassOptions下设sourceMap: false，写错位置（如顶层或minimizer配置里）会被忽略 - Vite：
css.devSourcemap默认为true，上线前务必设为false - MiniCssExtractPlugin 不影响 sass-loader 是否注入 map，关 map 必须从 Sass 层下手
停用 @extend，改用 @use + CSS 自定义属性
@extend 不共享声明，只拼接选择器；@import 是全文本拼接，极易全量引入：
- 禁用含
:hover、@media、&__header的占位符——它们必然触发选择器爆炸 - 用
@use "colors" as color替代@import "_colors"，未调用的变量/mixin 不会进入输出（需 Dart Sass ≥1.23.0） - 把间距、圆角等抽成
:root { --space-sm: 0.5rem; }，组件内统一用margin: var(--space-sm) - 第三方库（如 Bootstrap）若未支持
@use，可混用，但顺序要明确：先@use自己模块，再@import第三方
PostCSS 阶段必须介入，且顺序不能错
Sass 编译只是第一步，真正裁剪冗余靠 PostCSS 工具链，但必须在正确时机执行：
- PurgeCSS 必须放在 Sass 编译之后、CSS 压缩之前，且
content字段要覆盖所有模板路径，例如["src/**/*.{vue,html,js}"] -
cssnano 的
mergeLonghand、normalizeWhitespace才能简化数值、合并重复声明，但它无法处理@extend生成的分散规则 - Webpack 中 loader 顺序必须是：
sass-loader→css-loader→postcss-loader；Vite 要显式启用css.postcss并确保preprocess阶段也走 PostCSS - 别对
.scss源文件直接跑 PurgeCSS——它只认已编译的 CSS + 模板内容
最容易被忽略的是：Sass 输出阶段没控制好源码结构，后面所有压缩都是徒劳。体积问题不在“怎么压”，而在“写了什么”和“怎么编译”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
