唯一可靠方式是删全量引入，改用Sass源码手动按序导入functions/variables/mixins及实际所需组件（如buttons、grid）和子模块utilities，禁用print、dark-mode等冗余模块，并精简断点与utilities。
直接删 bootstrap.min.css 引入，改用 Sass 源码手动导入所需模块，是唯一能真正减掉未用 CSS 的方式。PurgeCSS 对 Bootstrap 无效，data-bs-toggle、JS 动态拼接类、条件渲染 utility 都会导致误删或漏删。
必须跳过 bootstrap.scss 入口文件
全量体积膨胀的根源就是它——bootstrap.scss 会无差别拉入所有组件（tooltip、carousel、offcanvas 等），哪怕你一行 JS 都没调用。它只是个“汇总脚本”，不删它，就等于默认全选。
- 删掉所有
@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" - 只加真正用到的组件，例如：
@import "bootstrap/scss/buttons"、@import "bootstrap/scss/grid"、@import "bootstrap/scss/utilities/text"
别信 $enable-* 变量能删 CSS
$enable-tooltip: false 这类变量只影响 JS 初始化逻辑，.tooltip 类的 CSS 规则照常输出。它们不是开关，而是“样式开关”——比如控制圆角是否启用，但不会让整个组件的 CSS 消失。
- 禁用组件 CSS 的唯一可靠方式：从
@import链里彻底移除对应文件，如跳过@import "bootstrap/scss/modal" - 特别注意
@import "bootstrap/scss/print"：含大量打印媒体查询，99% 的 Web 项目完全用不到，但默认就编译进去了 - 深色模式相关规则（
_dark-mode.scss）也同理，不显式引入就不会生成
utilities 和断点不精简，体积白减一半
就算只导入 buttons 和 grid，默认 $grid-breakpoints（5 个断点）和完整 $utilities map 仍会为每个间距类（如 mt-3）生成 5 套规则，冗余极高。
立即学习“前端免费学习笔记（深入）”；
- 重写
$grid-breakpoints，例如只留：$grid-breakpoints: (xs: 0, md: 768px); - 别
@import "bootstrap/scss/utilities"，改用子模块：@import "bootstrap/scss/utilities/spacers"、@import "bootstrap/scss/utilities/text" - 删掉不用的 utility 组，如不用阴影就跳过
@import "bootstrap/scss/utilities/shadows" - 禁用
:hover/:focus变体要谨慎——按钮交互依赖这些，一刀切会导致点击无反馈
最容易被忽略的是 print.scss 和深色模式规则：它们不靠 JS 触发，也不在 HTML 里显式出现，但只要没手动跳过 @import，就默默占掉几 KB。Sass 编译链里每一条 @import 都是实打实的字节输出，没有“懒加载”这回事。
