禁用特定组件CSS需手动导入所需模块而非仅设$enable-*变量；正确做法是新建自定义Sass入口，显式导入functions、variables、mixins及所需组件，剔除tooltip等无需部分，并精简print、utilities和grid-breakpoints以减小体积。
禁用特定组件CSS ≠ 设置 $enable-* 变量
直接在 @import "bootstrap/scss/bootstrap" 前加 $enable-tooltip: false 不会删掉 .tooltip 或 .popover 的 CSS 类——它只阻止 JS 初始化，所有样式规则照常编译输出。你看到的“没 tooltip”，只是浮层没被 JS 插入 DOM，但类名、选择器、尺寸、颜色全在 CSS 文件里，体积一分没少。
这个误解导致很多人反复修改变量却收效甚微。真正影响 CSS 编译的是 import 链，不是开关变量。
正确做法：新建自定义 Sass 入口，手动导入所需模块
Bootstrap 的 Sass 模块是解耦的：functions、variables、mixins 是基础依赖，每个组件（如 buttons、navbar）都有独立的 _component.scss 文件，互不引用。你只需显式导入需要的部分。
- 新建
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"; // ✅ 按需添加 // ❌ 不需要的，整行删掉，比如 tooltip、popover、carousel
- 务必保留
root和reboot，否则 CSS 自定义属性和基础重置会缺失 - 跳过
bootstrap/scss/bootstrap—— 它只是个汇总脚本，删掉不影响功能
容易被忽略的三大体积陷阱
即使你只导入了 buttons 和 navbar，默认编译仍可能塞进大量冗余 CSS，因为：
-
print.scss默认被引入，含大量打印媒体查询；若不导出 PDF，直接删掉这行@import "bootstrap/scss/print" -
utilities是体积大头：_spacing.scss会基于$spacers生成几十个mt-1～mb-5类；可精简$spacers变量，或注释掉整段@import "bootstrap/scss/utilities/_spacing" - 断点配置
$grid-breakpoints若保留全部(xs md lg xl xxl)，即使只用col-6，也会为每个断点生成重复规则；可简化为$grid-breakpoints: (xs: 0);彻底剔除媒体查询
第三方依赖可能悄悄重新引入被禁用的组件
就算你手动剔除了 tooltip，如果项目中用了某个 UI 库（比如某些日期选择器、富文本编辑器），它们内部可能又 @import "bootstrap/scss/tooltip" 或直接依赖 Tooltip JS，导致 CSS 和 JS 双重加载。
检查最终 CSS 输出里是否还存在 .tooltip 相关规则，再顺藤摸瓜查 node_modules 中哪些包引用了 Bootstrap 组件文件。这类隐性引入比你自己写的 import 更难察觉，也更难剔除。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
