$enable-*变量仅禁用JS初始化，不删除CSS；真正减体积需手动导入所需模块、精简utilities和断点，并检查第三方依赖是否重新引入。
直接改 $enable-tooltip 这类变量不会删 CSS，只停 JS 初始化；真减体积必须跳过 bootstrap.scss 全量入口，手动导入所需模块。
为什么 $enable-* 变量对 CSS 体积没用
这些变量（如 $enable-popover、$enable-toast）只控制对应组件的 JavaScript 是否自动绑定事件和初始化行为。CSS 类名（比如 .tooltip、.popover）和全部样式规则依然会完整编译进输出文件——你看到“没效果”，只是因为 JS 没跑，不是样式没了。
唯一例外是 $enable-reduced-motion，它会影响部分动画类生成，但和组件体积无关。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 设了
$enable-carousel: false，但构建后 CSS 里仍有.carousel、.carousel-inner等选择器 - Lighthouse 报告未使用 CSS >65%，但你页面里确实只用了
btn和container
正确做法：新建自定义 Sass 入口文件
删掉所有对 bootstrap/scss/bootstrap 的 @import，新建 src/custom-bootstrap.scss，严格按顺序导入基础依赖 + 明确需要的组件：
@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; @import "bootstrap/scss/type"; @import "bootstrap/scss/buttons"; @import "bootstrap/scss/navbar"; @import "bootstrap/scss/grid";
注意：
- 顺序不能错，
functions必须第一，variables第二，mixins第三；否则编译报错（如Undefined variable "$grid-columns"） -
root和reboot不能漏，否则 CSS 自定义属性和基础重置失效 - 不需要的组件（如
modal、tooltip）整行删掉，不是注释
别忽略的三大体积陷阱
即使只导入了 buttons 和 navbar，默认配置仍可能悄悄引入大量冗余 CSS：
-
print.scss默认被bootstrap.scss引入，含整套打印媒体查询；若不导出 PDF，务必在自定义入口中跳过它 -
utilities是最大头，_spacing.scss基于$spacers生成几十个mt-1～mb-5类；可精简$spacers或直接注释掉整段@import -
$grid-breakpoints若保留全部(xs, sm, md, lg, xl, xxl)，哪怕你只用col-6，每个断点都会生成一遍规则；可改为仅(xs: 0)来彻底剔除媒体查询
第三方依赖可能偷偷加回已禁用的组件
你手动删掉了 tooltip，但项目里用了某个 UI 库（如某些表单校验插件），它内部又 @import "bootstrap/scss/tooltip" ——结果还是白忙。
构建后检查最终 CSS 文件是否还含 .offcanvas、.carousel 等关键词。如果有，说明：
- 某处仍残留了全量
@import - node_modules 里某个依赖间接引入了 Bootstrap 组件 Sass
- 你用了 PurgeCSS 却没配好
defaultExtractor，漏掉了data-bs-toggle这类属性匹配
真正干净的减重，靠的是源头控制，不是后期扫描。一旦让 bootstrap.scss 进了构建链，再怎么关变量、删 class，都只是给整座山压薄一点而已。
