如何通过在线工具自定义Bootstrap 5并按需保留所需功能？

Bootstrap 5 已经移除了3.x版本提供的网页端可视化勾选打包工具，官方将自定义裁剪的能力全部迁移到了源码构建流程中，灵活度比旧版网页工具更高，具体操作分CSS和JS两个部分：

CSS 部分裁剪 #

Bootstrap 5的样式基于Sass预处理器编写，通过调整引入的模块即可实现按需打包：

• 先通过包管理器安装Bootstrap 5源码，或者下载官方发布的源码压缩包到本地
• 打开源码中的Sass主入口文件bootstrap.scss，文件内按顺序列出了所有功能模块的引入语句
• 直接注释掉你不需要的功能对应的@import行即可：比如不需要卡片组件就注释掉卡片模块的引入，不需要轮播组件就注释掉轮播相关的样式引入
• 如果需要调整主题色、断点、间距、字体等全局配置，只需要在引入模块前覆盖对应Sass变量值即可，不需要修改核心源码
• 最后用Sass编译工具执行编译、压缩操作，就能得到仅包含所需样式的最小化CSS文件

注意：部分组件存在样式依赖，比如导航栏依赖折叠组件样式、下拉菜单依赖定位工具类，注释模块前建议先确认依赖关系，避免出现样式缺失问题。

JS 部分裁剪 #

JS部分有两种常用的按需裁剪方案，可根据自己的项目技术栈选择：

• 基于ES Module的Tree Shaking方案
  如果你的项目使用Vite、Webpack、Rollup等现代前端构建工具，可以直接在项目入口文件中单独引入你需要的组件，不需要全量引入整个Bootstrap JS包。比如仅需要模态框、下拉菜单功能，就只写这两个组件的导入语句，构建时会自动移除未被引入的代码，最终压缩后的JS文件只会保留你用到的功能。
• 基于源码构建的自定义打包方案
  如果你没有配置前端构建流程，可以在本地修改Bootstrap源码根目录下的JS入口配置文件，将不需要的组件从引入列表中移除，再执行源码自带的构建命令，即可自动完成编译、压缩，输出裁剪后的JS文件。

实用提示 #

• 如果仅需要使用栅格、间距、响应式显隐等工具类，可以完全不引入任何组件样式，单独引入对应工具类的Sass文件，最终CSS体积可以压缩到10KB以内
• 部分JS组件存在依赖，例如下拉菜单、弹窗、提示框组件依赖Popper定位库，单独引入组件时不要遗漏对应依赖，否则功能会运行异常
• 裁剪完成后建议完整测试所有用到的组件交互、样式表现，确认没有因为模块缺失导致的异常问题

内容的提问来源于stack exchange，提问作者Mark