禁用@extend、按需导入组件、精简utilities最有效：@extend导致选择器爆炸且PurgeCSS无法清理；Bootstrap须手动导入所需模块而非依赖$enable-*变量；utilities需重定义$grid-breakpoints和$utilities映射表以剔除冗余。
直接删掉 @extend、禁用未用组件、关掉全量 utilities，比任何压缩配置都管用——真正膨胀的从来不是空格和换行，而是 Sass 编译时爆炸式生成的选择器和重复规则。
先停掉 @extend，尤其别用它跨组件复用
@extend 看似 DRY，实则在编译期把选择器暴力拼接，比如 %btn-base 被 12 个组件 @extend，就会生成 12 组带前缀的规则（.header .btn、.modal .btn……），体积翻倍且无法被 PurgeCSS 清理。
- 立即搜索项目中所有
@extend %...，替换成@include或 CSS 自定义属性（如--btn-padding+ 单一类名） - 如果必须保留
@extend，只用于同一文件内、无嵌套上下文的极简占位符（如%sr-only），且确保它不被&嵌套引用 - Webpack 里开
css-minimizer-webpack-plugin的mergeLonghand也救不了@extend造成的结构冗余——它只合并声明，不合并选择器
Bootstrap 按需导入必须手动切，别信 $enable-* 变量
$enable-tooltip: false 这类开关只影响 JS 初始化逻辑，.tooltip、.tooltip-inner 的 CSS 仍会完整编译进来。真正有效的瘦身是绕过 bootstrap.scss 入口，自己拼依赖链。
- 删掉所有
@import "bootstrap/scss/bootstrap"或import 'bootstrap/dist/css/bootstrap.min.css' - 新建
src/custom-bootstrap.scss，按顺序只@import：bootstrap/scss/functions→bootstrap/scss/variables→bootstrap/scss/mixins→ 再加你需要的组件（如bootstrap/scss/buttons） - 显式跳过
print.scss、carousel.scss、offcanvas.scss—— 它们默认被bootstrap.scss拉入，但多数项目根本不用
工具类（utilities）不是“开了就能用”，而是要重写 $utilities 映射表
Bootstrap 默认的 $utilities 会为每个断点（xs/md/lg/xl/xxl）+ 每个间距值（0–5）+ 每种方向（m/t/b/l/r）生成类，光 margin 就产出 100+ 规则。你只写了 mt-3，但整张表都进了 CSS。
立即学习“前端免费学习笔记（深入）”；
- 在自定义 SCSS 入口里，
@importbootstrap/scss/functions和variables后，立刻重定义$utilities： - 删掉不需要的断点：
$grid-breakpoints: (xs: 0, md: 768px); - 注释掉不用的工具组：
// $utilities: map-remove($utilities, "shadow"); - 禁用未用状态变体：
$utilities: map-remove($utilities, "hover");（注意：按钮悬停态可能受影响，得测）
@mixin 不是越多越好，未调用的也会进最终 CSS
Sass 没有 tree-shaking，@use "mixins/layout" as layout 却只调用 layout.flex-center，其余 19 个 @mixin 仍会全量编译进输出。更糟的是，含嵌套或 & 的 @mixin 每次调用都复制整块结构。
- 把纯计算型
@mixin（如px2rem()）转成@function，用@use导入后直接调用，不生成 CSS - 视觉型
@mixin（如card-shadow()）改用 CSS 自定义属性驱动：.card { --card-shadow: 0 1px 3px; }+ 单一规则声明 - 禁止在
@each循环里@include含选择器的@mixin；改用插值生成原子类：.m-#{$i} { margin: #{$i}px; }，再交 PurgeCSS 处理
最常被跳过的一步：确认 sassOptions.outputStyle 显式设为 'compressed'。Webpack 的 sass-loader 默认输出 expanded，后续所有压缩插件都在处理本可避免的格式冗余。
