应手动创建自定义入口文件，仅导入 functions、variables、mixins 及所需组件的 sass 文件，跳过 bootstrap.scss 全量加载；禁用 $enable-* 仅影响 js 初始化，不删 css；需额外精简 print、utilities 并检查第三方依赖。
如何在 Bootstrap 5 Sass 中跳过不需要的组件编译
Bootstrap 的体积膨胀主因不是 CSS 冗余，而是你 @import 了整套 bootstrap.scss 却没干预它的内部依赖链。默认情况下，bootstrap.scss 会无差别加载所有组件（包括 tooltip、popover、carousel 等），哪怕你一个都没用。
真正有效的瘦身方式，是绕过官方入口文件，手动导入核心依赖 + 仅需的组件。这要求你理解 Bootstrap Sass 的模块层级：
-
functions、variables、mixins是所有组件的基础，必须先载入 - 每个组件（如
button、navbar）都有独立的_component.scss文件，不互相依赖 -
bootstrap.scss本身只是个“汇总脚本”，删掉它不影响功能，只影响便利性
禁用特定组件的两种可靠写法
别碰 $enable-* 变量——它们大多只控制样式开关（比如圆角、阴影），不阻止 CSS 输出。真正管用的是从编译源头剔除。
推荐以下任一方式（二者不互斥）：
- 新建自定义入口文件（如
my-bootstrap.scss），只@import明确需要的部分：@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"; // 按需添加
- 若仍想沿用
bootstrap.scss入口，则在它之前用$enable-*关闭部分 JS 相关样式（注意：仅限影响 JS 行为的组件，如tooltip）：$enable-tooltip: false; $enable-popover: false; $enable-toast: false; @import "bootstrap/scss/bootstrap";
但注意：这不会删掉tooltip的 CSS 类（如.tooltip），只是不让 JS 初始化；CSS 仍存在，除非你手动删或用 PurgeCSS 后处理
容易被忽略的体积陷阱
光删组件还不够，下面三点常被跳过，却贡献了显著体积：
-
print.scss默认被引入，含大量媒体查询打印样式——如果你不做 PDF 导出，直接删掉这一行 -
utilities是大头，尤其_spacing.scss、_sizing.scss生成几十个类。可改用$spacers或$sizes变量精简范围，或彻底注释掉不需要的 utility 组 - 图标字体（Bootstrap Icons）和 Web 字体（如
font-face声明）不在 Sass 编译范围内，但常被一起打包进 dist。检查你的构建流程是否误引了bootstrap-icons/font或bootstrap/dist/fonts
验证是否真生效的快速方法
别只看最终 CSS 文件大小——那可能被压缩器掩盖了真实差异。更准的方式是查编译中间产物：
- 用
sass --watch编译时加--trace参数，观察哪些_*.scss文件实际被读取 - 在自定义入口里临时加一行
@debug "loaded";到某个组件文件顶部（如_tooltip.scss），如果终端没输出，说明它没被加载 - 搜索最终 CSS 文件中是否存在某组件的关键选择器，例如搜
.popover或.carousel-control—— 如果没出现，且你确认没在别处手写同名类，基本就成功了
最麻烦的其实是第三方插件暗地里依赖了你已禁用的组件（比如某个轮播图库悄悄调用了 Carousel 构造函数），这时 JS 报错反而比 CSS 多占几 KB 更值得警惕。
