引言：为什么需要自定义Bootstrap 5？
Bootstrap 5 是一个强大的前端框架，提供了丰富的预设组件和样式，但默认的“开箱即用”设计往往无法满足特定项目的品牌需求。通过 Sass（Syntactically Awesome Style Sheets）预处理器，我们可以轻松自定义 Bootstrap 的核心变量、扩展样式，甚至重写组件，而无需直接修改框架源代码。这不仅保持了代码的可维护性，还避免了直接编辑 CSS 文件带来的更新冲突。
在本指南中，我们将从零开始，逐步讲解如何使用 Sass 编译 Bootstrap 5。重点覆盖变量覆盖和样式扩展技巧。假设你已经熟悉基本的 HTML/CSS/JS 知识，并安装了 Node.js 环境。我们将使用 npm 来管理依赖，并通过实际代码示例演示每个步骤。整个过程强调实用性和可操作性，确保你能快速应用到项目中。
第一步：环境准备与 Bootstrap 5 安装
要自定义 Bootstrap 的 Sass 源代码，首先需要安装 Bootstrap 的 Sass 版本。Bootstrap 5 的 CSS 是通过 Sass 编译生成的，因此我们直接从源代码入手。
1.1 初始化项目
创建一个新目录作为项目根目录，然后初始化 npm 项目：
mkdir bootstrap-custom
cd bootstrap-custom
npm init -y
这会生成一个
package.json
文件，用于管理依赖。
1.2 安装依赖
安装 Bootstrap 5、Sass 编译器（sass）以及 Bootstrap 的依赖（如 Popper.js，用于 JS 组件，但自定义 Sass 主要关注 CSS）：
npm install bootstrap sass –save
bootstrap
：包含完整的 Sass 源代码（在
node_modules/bootstrap/scss/
目录下）。
sass
：Dart Sass 编译器，用于将
.scss
文件编译成
.css
。
安装完成后，你的
package.json
会列出这些依赖。接下来，创建一个
scss
目录来存放自定义文件：
mkdir scss
touch scss/custom.scss
1.3 验证安装
在
scss/custom.scss
中添加一个简单的测试规则，确保编译工作正常：
// scss/custom.scss
@import “bootstrap/scss/bootstrap”; // 导入 Bootstrap 的所有 Sass 模块
body {
background-color: #f8f9fa; // 测试自定义样式
}
然后，在
package.json
的
scripts
部分添加编译脚本：
“scripts”: {
“build-css”: “sass scss/custom.scss css/custom.css –style=compressed”
}
运行编译：
npm run build-css
如果一切正常，会在
css/
目录下生成
custom.css
文件。打开浏览器查看效果，确保 Bootstrap 的基础样式已加载。这一步是基础，确保你的环境能正确处理 Sass 导入和编译。
第二步：理解 Bootstrap 5 的 Sass 结构
Bootstrap 5 的 Sass 源代码位于
node_modules/bootstrap/scss/
，采用模块化设计，便于自定义。核心文件包括：
_variables.scss
：定义所有核心变量（如颜色、间距、断点）。
_root.scss
：应用变量到 CSS 自定义属性（CSS 变量）。
组件文件：如
_buttons.scss
、
_navbar.scss
等，使用变量生成样式。
bootstrap.scss
：入口文件，导入所有模块。
自定义的关键是
不直接修改源文件
，而是创建自己的
.scss
文件，先覆盖变量，再导入 Bootstrap，最后添加扩展样式。这样，当 Bootstrap 更新时，你的自定义代码不会被覆盖。
2.1 变量覆盖的原理
Bootstrap 的变量以
$
开头，例如
$primary
定义主色调。覆盖变量时，只需在导入 Bootstrap 前定义你的值，Sass 会优先使用你的定义。
2.2 样式扩展的原理
扩展样式可以通过：
添加新规则到现有组件。
使用
@mixin
或
@extend
复用 Bootstrap 的工具类。
创建自定义组件，基于 Bootstrap 的基础类。
现在，让我们通过实战示例逐步深入。
第三步：变量覆盖实战
变量覆盖是自定义 Bootstrap 最常见的方式。我们以一个电商网站为例，覆盖颜色、字体和间距变量，创建一个“暗黑模式”主题。
3.1 覆盖颜色变量
默认 Bootstrap 的
$primary
是蓝色（#0d6efd）。我们将其改为绿色（#28a745），并自定义其他颜色。
在
scss/custom.scss
中：
// 第一步：覆盖变量（必须在导入 Bootstrap 前）
$primary: #28a745; // 主色调改为绿色
$success: #198754; // 成功色改为深绿
$danger: #dc3545; // 保持默认红色，但可以自定义
$light: #212529; // 浅色背景改为深色（暗黑模式）
$dark: #f8f9fa; // 深色改为浅色
// 字体自定义
$font-family-base: ‘Roboto’, sans-serif; // 引入 Google Fonts，需要在 HTML 中添加
$font-size-base: 1rem; // 基础字体大小
// 间距自定义
$spacer: 1rem; // 基础间距单位
$spacers: ( // 自定义间距映射
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);
// 第二步：导入 Bootstrap 的所有 Sass 模块
@import “bootstrap/scss/bootstrap”;
// 第三步：添加额外自定义样式（可选）
body {
background-color: $light; // 应用暗黑背景
color: $dark; // 文字颜色为浅色
}
3.2 编译与测试
运行
npm run build-css
，生成的
css/custom.css
会应用这些变量。创建一个简单的 HTML 文件测试：
自定义字体：Roboto
打开这个 HTML，你会发现按钮变为绿色，背景为深色，字体为 Roboto。这就是变量覆盖的威力——只需几行代码，就能改变整个主题。
3.3 高级变量覆盖：断点和网格
如果你需要自定义响应式断点（例如，移动优先的自定义布局）：
$grid-breakpoints: ( // 自定义断点
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
$container-max-widths: ( // 容器最大宽度
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
导入 Bootstrap 后，使用
.container-lg
等类会自动适应这些值。这在需要特定屏幕尺寸优化的项目中非常有用，例如移动端 App。
第四步：样式扩展实战
除了覆盖变量，我们还可以扩展 Bootstrap 的样式，例如添加自定义按钮变体、修改导航栏或创建新组件。
4.1 扩展按钮组件
假设你想添加一个“幽灵按钮”（透明背景，边框），基于 Bootstrap 的按钮 mixin。
在
scss/custom.scss
中：
// 导入 Bootstrap（变量覆盖已处理）
@import “bootstrap/scss/bootstrap”;
// 扩展：自定义按钮 mixin
@mixin button-ghost($color) {
@include button-variant(transparent, $color, $color);
border: 2px solid $color;
&:hover {
background-color: $color;
color: white;
}
}
// 应用自定义按钮
.btn-ghost-primary {
@include button-ghost($primary);
}
.btn-ghost-success {
@include button-ghost($success);
}
编译后，生成的 CSS 类似：
.btn-ghost-primary {
background-color: transparent;
border: 2px solid #28a745;
color: #28a745;
}
.btn-ghost-primary:hover {
background-color: #28a745;
color: white;
}
在 HTML 中使用：
这展示了如何复用 Bootstrap 的内部 mixin（
button-variant
），避免从零编写 CSS。
4.2 修改导航栏样式
扩展 Navbar 组件，添加自定义阴影和高度。
// 在导入 Bootstrap 后添加
@import “bootstrap/scss/bootstrap”;
.navbar-custom {
@extend .navbar; // 继承基础 navbar 样式
min-height: 80px; // 自定义高度
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); // 添加阴影
.navbar-brand {
font-weight: bold;
font-size: 1.5rem;
color: $primary !important; // 强制覆盖品牌颜色
}
.nav-link {
padding: 1rem 1.5rem; // 增加链接间距
&:hover {
background-color: rgba($primary, 0.1); // 悬停效果
}
}
}
HTML 示例：
编译后，导航栏将有自定义高度、阴影和悬停效果。这通过
@extend
复用现有类，避免重复代码。
4.3 创建全新组件：自定义卡片
扩展 Card 组件，添加图标支持。
@import “bootstrap/scss/bootstrap”;
.card-icon {
@extend .card; // 继承卡片
border: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
.card-body {
display: flex;
align-items: center;
gap: 1rem;
.icon {
font-size: 2rem;
color: $primary;
}
}
}
HTML：
这个组件结合了 Bootstrap 的网格和 Flexbox，扩展了卡片的功能，添加了图标布局。
第五步：高级技巧与最佳实践
5.1 使用 CSS 变量与 Sass 结合
Bootstrap 5 支持 CSS 变量（自定义属性），可以动态覆盖。例如，在 Sass 中定义：
:root {
–my-primary: #28a745;
}
.btn-primary {
background-color: var(–my-primary);
}
这允许在运行时通过 JavaScript 更改主题，例如切换暗黑模式：
document.documentElement.style.setProperty(‘–my-primary’, ‘#ff6b6b’);
5.2 优化编译与生产环境
压缩输出
：在
sass
命令中添加
–style=compressed
以最小化文件。
源映射
：开发时使用
–source-map
调试。
只导入所需模块
：避免导入整个 Bootstrap，只导入需要的部分以减小文件大小：
@import “bootstrap/scss/functions”;
@import “bootstrap/scss/variables”;
@import “bootstrap/scss/mixins”;
@import “bootstrap/scss/buttons”; // 只导入按钮
5.3 常见问题排查
变量未生效
：确保覆盖在
@import
前。
编译错误
：检查 Sass 版本（Bootstrap 5 需要 Sass 1.23+）。
性能
：大型项目使用 PostCSS 插件处理 autoprefixer。
5.4 与 JavaScript 集成
自定义 Sass 不影响 JS，但组件如 Modal 需要 JS。安装 Popper.js 和 Bootstrap JS：
npm install @popperjs/core
在 JS 中导入：
import ‘bootstrap’;
然后在 HTML 中添加
data-bs-toggle
属性。
结论
通过本指南，你已从零掌握 Bootstrap 5 的 Sass 自定义：从环境搭建、变量覆盖到样式扩展。实战示例展示了如何快速创建主题化组件，如绿色按钮和自定义导航栏。这些技巧能显著提升项目效率，确保品牌一致性。建议从简单覆盖开始，逐步扩展复杂组件。参考 Bootstrap 官方文档（getbootstrap.com）获取最新变量列表，并实验不同组合。如果你有特定项目需求，如集成 Tailwind 或 Vue，可以进一步扩展这些基础。开始你的自定义之旅吧！