--style=compressed仅删空格换行注释，不合并规则、不剔未用选择器、不简化calc()或颜色值；真正体积膨胀源于@extend爆炸、嵌套过深、@import全量引入、工具类循环及sourceMap残留。
开 --style=compressed 不能解决 Sass 编译后 CSS 过大的问题，它只删空格、换行和注释，不合并重复规则、不剔除未用选择器、不简化 calc() 或颜色值。真正膨胀的源头在源码结构失控——比如 @extend 爆炸、嵌套过深、@import 全量引入、工具类循环生成。
为什么开了 compressed 体积还是很大
因为 sass --style=compressed 不做逻辑优化：不会合并 .btn { margin: 1rem; } 和 .card { margin: 1rem; }，也不会删除 HTML 里根本没出现过的 .m-42。它只会把这两条压成一行，但数量没变。
- 运行
grep -o "margin:" main.css | wc -l，如果结果远超组件数（比如 >200），基本是@extend或@for循环失控 -
gzip -c main.css | wc -c后仍远超预期，说明是内容冗余，不是格式问题 - 检查文件末尾是否有大量 base64 字符串——那是
sourceMap在作祟，直接 +100KB+
必须禁用 sourceMap 才能让压缩生效
sourceMap 和 --style=compressed 天然冲突：前者要保留原始结构映射，后者把所有内容压成一行，导致映射失效；更重要的是，它会在 CSS 文件末尾追加 base64 编码的源码映射，体积暴增。
- 命令行编译时显式加
--no-source-map：npx sass src/main.scss dist/main.css --no-source-map --style=compressed - Webpack 项目中，在
css.loaderOptions.sass.sassOptions下设sourceMap: false，不是顶层配置 - Vite 用户注意：
css.devSourcemap默认为true，上线构建前务必关掉
@use 替代 @import 是模块化瘦身的关键一步
@import 是文本拼接，哪怕只调用 px2rem(12)，也会把整个 _utils.scss（含未用的 @mixin clearfix、一堆变量）全塞进输出；@use 则按需加载，只引入被引用的部分，并自动加命名空间隔离。
立即学习“前端免费学习笔记（深入）”；
- 必须用 Dart Sass ≥1.23.0；
node-sass已废弃，不支持@use -
@use "colors" as color后，必须写color.$primary，不能直接写$primary - 第三方库（如 Bootstrap 5）若未切
@use，可暂时混用，但加载顺序要明确：先@use自己模块，再@import第三方 - 旧项目可用
sass-migrator module --verbose自动改写，别手改
真正减体积靠 PostCSS 阶段的 cssnano + PurgeCSS
@extend 和深层嵌套生成的选择器，只有在 Sass 编译完成后才能被识别和裁剪。PurgeCSS 必须基于实际 HTML/JS/Vue 模板扫描，把没出现在任何模板里的完整规则整条干掉；而 cssnano 的 mergeLonghand、normalizeWhitespace 才能真正简写 0px → 0、#ff0000 → #f00、合并重复声明。
- Webpack 中顺序必须是：
sass-loader→css-loader→postcss-loader→MiniCssExtractPlugin→PurgeCSS→CssMinimizerPlugin - Vite 中需在
vite.config.ts显式启用css.postcss，并确保preprocess阶段也走 PostCSS - PurgeCSS 的
content必须覆盖所有模板路径，例如src/**/*.{vue,js,jsx,ts,tsx}，漏一个文件，里面用到的类就保留在最终 CSS 里 - 别对
.scss文件直接跑 PurgeCSS——它只认已生成的.css+ 模板集合
最容易被忽略的是：压缩只是收尾动作，体积问题必须往前推到 SCSS 编写阶段。比如 @extend %button-base 被 12 个组件调用，就会生成 12 条独立规则，后续所有压缩都只能在“12 条”基础上做微调，无法变成“1 条”。真正有效的控制点，永远在第一行 SCSS 代码写下去之前。
