使用Sass编译Bootstrap源码需初始化npm项目并安装依赖，创建自定义SCSS入口文件导入核心模块，重写变量后通过sass命令编译；还可直接修改node_modules中变量、用覆盖文件注入样式、使用官方定制网站或Webpack集成实现深度定制。
一、使用Sass编译Bootstrap源码的基本配置流程
Bootstrap官方自v4起全面转向Sass作为默认预处理器，其源码以 Sass 文件（.scss）组织，需通过 Sass 编译器生成最终 CSS。配置核心在于建立可复用的构建环境，使定制变量、覆盖默认样式、剔除未用组件成为可能。
1、在项目根目录初始化 npm 项目并安装依赖：npm init -y && npm install bootstrap sass --save-dev。
2、创建自定义入口文件 _custom.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";。
3、在导入 variables 之后、导入 root 之前，插入自定义变量重写语句，例如：$primary: #2c3e50; $body-bg: #f8f9fa;。
4、使用命令行执行编译：sass --watch custom.scss:dist/css/bootstrap-custom.css --style=compressed。
二、直接修改 node_modules 中 Bootstrap Sass 源码
该方式适用于快速验证样式变更效果，无需额外构建步骤，但存在版本升级时丢失修改的风险，属于临时调试手段。
1、定位到 node_modules/bootstrap/scss/_variables.scss 文件。
2、查找目标变量，如 $enable-responsive-font-sizes，将其值由 true 改为 false。
3、修改导航栏背景色变量 $navbar-dark-color 为 #e0e0e0。
4、保存后重新运行 Sass 编译命令，观察输出 CSS 是否生效。
三、通过自定义构建脚本注入变量与覆盖样式
利用 Sass 的模块系统与作用域特性，在不侵入原始源码的前提下实现深度定制，支持条件编译与组件按需引入。
1、新建 bootstrap-overrides.scss，仅包含需覆盖的类规则，例如：.btn-primary { background-color: #8e44ad; border-color: #7d3c98; }。
2、在主入口文件中，确保 bootstrap-overrides.scss 在所有 Bootstrap 组件导入之后加载。
3、在构建脚本中添加条件判断逻辑，例如使用 Node.js 脚本读取环境变量 CUSTOM_THEME=dark，动态选择加载 _dark-variables.scss。
4、执行构建时传入参数：npx sass --load-path=node_modules custom.scss:dist/css/app.css --style=expanded。
四、使用 Bootstrap 官方提供的定制工具网站导出配置
Bootstrap 提供在线定制界面（getbootstrap.com/docs/5.3/customize），允许图形化调整变量、启用/禁用组件，并生成可下载的 SCSS 包与编译后的 CSS，适合无构建经验或原型阶段快速产出。
1、访问 https://getbootstrap.com/docs/5.3/customize/ 页面。
2、在 Variables 标签页中修改 $grid-breakpoints，例如将 lg 值从 992px 改为 1024px。
3、在 Components 标签页中取消勾选 Alerts 和 Toasts 以减小体积。
4、点击 Download 按钮获取压缩包，解压后运行其中的 compile.sh 或手动执行 Sass 命令。
五、基于 Webpack + sass-loader 的模块化集成方案
适用于已有 Webpack 构建流程的现代前端项目，支持 CSS 拆分、SourceMap、热更新及与 JavaScript 模块联动。
1、在 webpack.config.js 的 module.rules 中添加 sass-loader 配置，确保 includePaths 包含 node_modules。
2、在入口 JS 文件中直接 import 自定义 SCSS：import './styles/custom-bootstrap.scss';。
3、在 custom-bootstrap.scss 中使用 @use 语法替代 @import，例如：@use 'bootstrap' as bs with ($primary: #1abc9c);。
4、启动开发服务器：npx webpack serve --mode development，验证样式是否实时响应变量变更。
