如何在VSCode+NPM环境下定制Bootstrap5.3并剔除无用组件？

当前VSCode+Node.js环境完全可以实现按需编译，不需要额外引入LESS、Gulp等工具，直接利用Bootstrap 5的SCSS模块化结构即可完成组件剔除，步骤如下：

1. 拆解全量导入为按需组件导入 #

你之前用的@import '../../node_modules/bootstrap/scss/bootstrap';是全量导入所有组件，现在可以替换为只导入核心依赖和需要的组件文件，跳过不需要的（如accordion、carousel、modal、dropdown等）。

示例自定义SCSS文件：

// 自定义变量
$primary: #c29938;
$light: pink;

// 导入核心依赖（必须，所有组件都依赖这些基础文件）
@import '../../node_modules/bootstrap/scss/_functions';
@import '../../node_modules/bootstrap/scss/_variables';
@import '../../node_modules/bootstrap/scss/_mixins';

// 自定义主题色
$custom-theme-colors: (
    "altlight": #f2ebfa,
    "altdark": #522192
);
$theme-colors: map-merge($custom-theme-colors, $theme-colors);

// 导入基础样式（按需保留，一般建议包含这些基础重置和排版）
@import '../../node_modules/bootstrap/scss/_root';
@import '../../node_modules/bootstrap/scss/_reboot';
@import '../../node_modules/bootstrap/scss/_type';

// 导入你需要的组件（示例：仅保留网格、按钮、表单）
@import '../../node_modules/bootstrap/scss/_grid';
@import '../../node_modules/bootstrap/scss/_buttons';
@import '../../node_modules/bootstrap/scss/_forms';

// 注意：不要导入_accordion.scss、_carousel.scss、_modal.scss、_dropdown.scss等不需要的组件文件

2. 注意组件依赖关系 #

部分组件存在依赖关联，例如：

• Navbar的下拉功能依赖Dropdown组件，如果不需要Dropdown，Navbar的下拉菜单会失效
• 部分交互组件（如Modal）依赖Popper.js，但Bootstrap 5已将其集成，若不导入对应组件则无需额外处理

请根据自己的实际功能需求，确认需要保留的组件及其依赖，避免漏导必要文件。

3. 编译SCSS文件 #

沿用你现有的编译流程即可，比如在package.json中配置编译脚本：

"scripts": {
  "build-css": "sass src/scss/custom.scss dist/css/custom.css --style compressed"
}

执行npm run build-css就能得到仅包含所需组件的压缩CSS文件。

4. JS部分同步按需处理 #

如果需要缩减JS体积，同样不要引入全量bootstrap.js，而是单独导入需要的组件JS：

// 按需导入Bootstrap组件JS
import 'bootstrap/js/dist/button';
import 'bootstrap/js/dist/form';

// 跳过accordion、carousel、modal、dropdown等组件的JS文件

通过Webpack或Rollup等打包工具编译即可，也可直接在页面引入单个组件的JS文件（无需模块打包时）。

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