sass --style=compressed对Bootstrap体积几乎无效，因其仅删除空格、换行和注释，不合并选择器、不剔除未用规则、不简化calc()或颜色值；真正膨胀源于@extend滥用、深层嵌套、全量@import及循环生成工具类。
为什么 sass --style=compressed 对 Bootstrap 体积几乎没用
因为 sass --style=compressed 只做格式清理：删空格、换行、注释，不合并选择器、不剔除未用规则、不简化 calc() 或颜色值（比如 #ff0000 不会变成 #f00）。实测 gzip 后体积通常只降不到 3%。你看到的“大文件”，根本不在压缩参数上，而在源码结构本身。
哪些 Sass 写法会让 Bootstrap 输出体积“爆炸”
真正让 CSS 膨胀的是你在 .scss 文件里写的逻辑，不是编译命令。运行 grep -o "\.btn" main.css | wc -l，如果结果几百上千，大概率是以下写法导致：
-
@extend %button-base被多个上下文调用，生成.header .btn、.modal .btn、.sidebar .btn这类重复前缀的选择器 - 嵌套超过 4 层，例如
.card { .list { .item { &:hover { } } } }，每层都复制父选择器 -
@import "bootstrap/scss/bootstrap.scss"全量引入——哪怕只用了一个px2rem()函数，也会把 tooltip、carousel、print 等全部样式打包进来 - 循环生成工具类：
@for $i from 1 through 100 { .m-#{$i} { margin: #{$i}px; } }直接产出 100 条规则
为什么直接引入 bootstrap.min.css 反而更糟
它是个已压缩的黑盒，Webpack 的 CssMinimizerPlugin 对它基本无效；更关键的是，它不参与 loader 流程，无法触发 tree-shaking 或按需编译。未用的 .carousel、.tooltip 规则仍原样打包，gzip 后多占 15–20KB。你不是在压缩 CSS，而是在搬运一个封印好的冗余包。
真正有效的瘦身路径只有两条
必须同时控制“编译前”和“编译后”两个阶段：
立即学习“前端免费学习笔记（深入）”；
- 编译前：改用自定义入口文件（如
src/custom-bootstrap.scss），只@import明确需要的模块，例如：@import "bootstrap/scss/functions"、@import "bootstrap/scss/grid"、@import "bootstrap/scss/buttons"；禁用print.scss和全量utilities/_utilities，改用细粒度子文件（如仅_spacing、_text） - 编译后：PurgeCSS 必须放在 Sass 编译之后、CSS 压缩之前，且
content字段要覆盖所有模板路径（如src/**/*.{vue,js,tsx}）；漏一个文件，里面用到的类就保留在最终 CSS 里
最容易被忽略的一点：禁用 @extend 改用 CSS 自定义属性（如 --btn-padding），能让声明集中、引用分散，gzip 效果显著提升——这比调任何压缩参数都管用。
