如何移除Bootstrap 5冗余组件以缩小CSS文件体积？

要实现只保留12栅格系统和导航栏的Bootstrap 5 CSS，最精准的方式是基于Bootstrap的Sass源码自定义编译，彻底剔除冗余组件。具体操作步骤如下：

1. 获取Bootstrap Sass源码 #

通过npm安装Bootstrap 5，直接获取完整的Sass源文件：

npm install bootstrap@5 --save-dev

安装完成后，可在项目的node_modules/bootstrap/scss目录下找到所有Sass核心文件。

2. 创建自定义SCSS入口文件 #

在项目中新建一个SCSS文件（例如custom-bootstrap.scss），仅导入核心依赖和所需组件，注意保持依赖顺序：

// 导入Bootstrap核心基础依赖（组件运行必需）
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";

// 导入12栅格系统核心
@import "../node_modules/bootstrap/scss/grid";

// 导入导航栏相关组件（导航栏依赖基础导航样式）
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/navbar";

// 可选：按需补充导航栏所需工具类
// 若导航栏布局出现错位等问题，可按需导入以下工具类（避免全量导入）
// @import "../node_modules/bootstrap/scss/utilities/api";
// $utilities: map-merge($utilities, (
//   "flex": map-get($utilities, "flex"),
//   "justify-content": map-get($utilities, "justify-content"),
//   "align-items": map-get($utilities, "align-items"),
//   "margin": map-get($utilities, "margin"),
//   "padding": map-get($utilities, "padding")
// ));

3. 编译自定义SCSS文件 #

使用Sass编译器将自定义SCSS编译为CSS。先全局安装Sass：npm install -g sass，再执行编译命令：

sass custom-bootstrap.scss custom-bootstrap.css --style compressed

--style compressed参数会生成压缩后的CSS，进一步缩小文件体积。

关键注意事项 #

• 依赖顺序不可乱：核心工具类（functions、variables等）必须放在最前，否则组件会因依赖缺失编译失败。
• 导航栏依赖基础组件：导航栏必须搭配_nav.scss基础导航样式才能正常工作，需同时导入。
• 工具类按需添加：若导航栏布局异常，可通过utilities/api精准导入所需工具类，避免全量导入造成冗余。

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