直接引入bootstrap.min.css会加载全部1500+ utility类，导致70%以上CSS冗余；应改用Sass按需编译，只导入functions/variables/mixins及所需utility组，并精简断点与值，避免!important冲突和体积浪费。
能显著减少冗余 CSS，但前提是放弃“全量引入 + 手写 class”的旧习惯，转而用原子化组合 + Sass 按需编译。
为什么直接 import bootstrap.min.css 时 utility 类反而加重冗余
bootstrap.min.css 包含全部 1500+ 个 utility 类（如 mt-5、bg-gradient、shadow-sm），哪怕你只用了 text-center 和 mb-3，其余 98% 的规则仍会进打包产物。更糟的是，这些类默认带 !important，一旦和自定义样式冲突，就得加权对抗——这又催生更多 hack 类。
- 检查你的构建产物 CSS 文件，搜
.shadow-或.border-0：如果项目根本没用阴影或边框控制，说明体积已被白占 - 用 Chrome DevTools 的 Coverage 面板打开页面，看 bootstrap.min.css 的未使用率——常超 70%
- 全量引入下，
utilities模块本身就能贡献 40–60KB（gzip 前），比整个按钮组件还重
如何用 Sass 按需启用真正需要的 utility 类
不是“禁用 utility”，而是精准控制哪些属性、哪些断点、哪些值生成 CSS。关键在覆盖 $utilities 变量前，先删掉默认全量导入。
- 删掉所有
@import "bootstrap/scss/bootstrap"或import 'bootstrap/dist/css/bootstrap.min.css' - 新建
src/custom-bootstrap.scss，严格按顺序导入：@import "bootstrap/scss/functions"→@import "bootstrap/scss/variables"→@import "bootstrap/scss/mixins" - 只保留你真用的 utility 组，例如只留间距和文字色：
$utilities: map-get($utilities, "margin")
，注释掉shadow、border、position等整组 - 缩小断点范围：
$grid-breakpoints: (xs: 0, md: 768px)
，避免为xl和xxl生成多余媒体查询
utility 类组合时为什么 text-primary fw-bold 有时不生效
不是类写错了，而是权重或作用域问题。Bootstrap 默认给所有 utility 类加 !important，但你自己写的 CSS 若没加，就会被压掉；另外，某些组件自带内联 color 或 font-weight，会覆盖 utility。
立即学习“前端免费学习笔记（深入）”；
- 按钮里
text-primary失效？因为.btn自带color: var(--bs-btn-color)，且没!important—— utility 的color: #0d6efd !important其实赢了，但被.btn的 CSS 变量间接绕过 - 解决方法：要么改
--bs-btn-color变量，要么用text-reset先清掉组件默认色，再叠text-primary - 动态添加类时（如
el.classList.add("d-none")），确保你没关掉$enable-important-utilities: false，否则 class 加了也不生效
别信 PurgeCSS 能救 bootstrap.min.css 的命
它扫描不到 data-bs-toggle="collapse" 触发的样式、JS 拼接的 "btn btn-" + type、模板里 v-if="show" class="d-block" 这类逻辑，硬扫只会删掉正在用的 .dropdown-menu 或 .visually-hidden。
- 真要用 PurgeCSS，必须让它扫你 Sass 编译后的 CSS，而不是原始
bootstrap.min.css - 必须手动加白名单：
whitelistPatterns: [/^d-/, /^m-/, /^text-/, /^bg-/]
，否则mb-2、text-success全被误杀 - 每次 Bootstrap 升级后，重新 grep 输出 CSS 里是否还有
.offcanvas、.carousel—— 有就说明 purge 没起效，或 import 没清理干净
最易被忽略的一点：utility 的原子性只在 HTML 层成立；一旦你开始用 JS 动态拼类名、或依赖 data-bs-* 属性触发样式，就必须同步保证 Sass 编译链完整——少一个 @import "bootstrap/scss/mixins"，form-control 就可能漏掉伪元素重置。
