$enable-*变量仅禁用JS初始化，不删除CSS；真正减体积需跳过bootstrap.scss全量入口，手动导入functions、variables、mixins及所需组件，并精简print、utilities和断点配置。
直接改 $enable-tooltip 这类变量不会删任何 CSS，只停 JS 初始化；真正减体积必须跳过 bootstrap.scss 全量入口，手动导入所需模块。
为什么 $enable-* 变量对 CSS 体积无效
很多人在 @import "bootstrap/scss/bootstrap" 前加 $enable-modal: false，以为能去掉 .modal 相关样式。实际编译出的 CSS 里，.modal、.modal-dialog 等规则全在——这些变量只控制 JS 是否自动绑定事件，和样式生成完全无关。
唯一例外是 $enable-reduced-motion，它会影响部分动画类，但和组件体积无关。
-
$enable-popover、$enable-toast、$enable-carousel同理：JS 不跑，但 CSS 还在 - 你看到的“没弹窗”，只是因为 JS 没初始化，不是样式没了
- 构建后检查最终 CSS 文件，搜
.offcanvas或.tooltip，大概率还能找到
正确做法：新建自定义入口文件，只 import 明确需要的 Sass
Bootstrap 的 Sass 是解耦设计：functions、variables、mixins 是基础依赖，每个组件（如 buttons、navbar）都有独立文件，不互相引用。
立即学习“前端免费学习笔记（深入）”；
新建 my-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";
- 删掉
@import "bootstrap/scss/bootstrap"—— 它只是汇总脚本，非必需 - 务必保留
root和reboot，否则 CSS 自定义属性和基础重置会缺失 - 没用到表单？整行
@import "bootstrap/scss/forms"直接删掉
容易被忽略的体积大头：print、utilities 和断点
即使你只导入了 buttons 和 navbar，默认编译仍可能包含大量冗余代码，因为：
-
print.scss默认被引入，含大量媒体查询打印样式；不用 PDF 导出？直接跳过这行 -
utilities/_spacing.scss会基于$spacers生成几十个mt-1～mb-5类；可注释整段@import，或精简$spacersmap - 断点配置
$grid-breakpoints若保留全部(xs md lg xl)，编译器会为每个断点生成重复规则；若真不需要响应式，可设为(xs: 0)
第三方依赖可能悄悄 reintroduce 被删的组件
你以为删干净了 modal，结果构建后 CSS 里还有 .modal-backdrop —— 很可能是某个 UI 库（比如 vue-bootstrap 或 react-bootstrap）内部又 import 了完整 Bootstrap Sass。
- 检查
node_modules中相关库的源码，看它是否依赖bootstrap/scss/bootstrap - 用
grep -r "\.modal" dist/css/或浏览器 DevTools 搜索确认来源 - 若无法修改第三方库，只能在构建后用 PurgeCSS 补刀，但要配好
safeList防误删
最可靠的瘦身路径，永远是从 Sass 编译源头切断不需要的模块，而不是指望变量开关或后处理工具来“擦屁股”。一旦项目接入了多个封装层，那些被悄悄带进来的 carousel、tooltip 就很难彻底清干净。
