使用 Sass 自定义 Bootstrap 主题：完整工作流
2026-06-20 ·
通过 Sass 变量自定义 Bootstrap 主题是最强大且可维护的方式。本文将介绍完整的工作流，从项目初始化到主题定制的每一步。
1. 项目初始化
npm init -y
npm install bootstrap@latest sass --save-dev
2. 创建自定义变量文件
创建 _custom-variables.scss，在引入 Bootstrap 之前覆盖变量：
// _custom-variables.scss
$primary: #6f42c1; // 紫色主题
$secondary: #6c757d;
$success: #198754;
$font-family-base: 'Inter', system-ui, sans-serif;
$border-radius: .5rem;
$enable-shadows: true;
3. 主 SCSS 文件
// main.scss
// 1. 自定义变量（必须在 Bootstrap 之前）
@import 'custom-variables';
// 2. Bootstrap 核心
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/variables-dark';
@import 'bootstrap/scss/maps';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/root';
// 3. 按需引入组件
@import 'bootstrap/scss/reboot';
@import 'bootstrap/scss/type';
@import 'bootstrap/scss/grid';
@import 'bootstrap/scss/buttons';
@import 'bootstrap/scss/cards';
@import 'bootstrap/scss/forms';
@import 'bootstrap/scss/nav';
@import 'bootstrap/scss/navbar';
// 4. 自定义组件样式
.btn-custom {
--bs-btn-padding-x: 1.5rem;
border-radius: 2rem;
}
4. 编译
# 编译到 CSS
sass main.scss:dist/bootstrap-custom.css --style=compressed
使用 sass --watch main.scss:dist/bootstrap-custom.css 开启自动编译，每次保存 SCSS 文件都自动生成 CSS。