Bootstrap 的 Sass 定制
CDN 引入的 Bootstrap 是编译好的成品，改不了内部变量；想定制主题必须用 Sass 源码方式：npm install bootstrap，然后写一个自己的 .scss 入口文件，先覆盖变量、再引入框架源码，构建时 Sass 会用你的值重新生成整套样式。
关键规则：变量覆盖必须写在 @import 之前——$primary 在编译 bootstrap 源码前就要是新值，所有 btn-primary、链接色、进度条都会跟着变。还能按需 @import：只要 grid 就只引 grid 相关文件，产物体积大幅缩小。
核心变量速查：$primary/$secondary/$success/$danger（主题色）、$border-radius（全局圆角）、$font-family-base（默认字体）、$body-bg/$body-color（页面底色文字色）。改十来个变量，整个站点的视觉气质就焕然一新，而且风格完全统一——这是覆盖 CSS 类名做不到的。
本节要点定制 Bootstrap：npm 装包 → 自建 scss → 变量覆盖必须在 @import 源码之前；改 $primary 等变量全局联动；可按需 import 缩小体积。
代码
// styles/custom.scss —— Bootstrap 主题定制入口
// 1. 先覆盖官方 Sass 变量（必须在 import 之前！）
$primary: #6f42c1; // 主色：紫色
$success: #2ea44f;
$border-radius: 0.5rem; // 全局圆角
$font-family-base: 'PingFang SC', sans-serif;
$body-bg: #f8f9fa; // 页面底色
$enable-negative-margins: true; // 开启负 margin 工具类
// 2. 引入函数与变量体系（顺序固定）
@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';
@import 'bootstrap/scss/reboot';
// 3. 按需引入：只要栅格和按钮？
@import 'bootstrap/scss/grid';
@import 'bootstrap/scss/buttons';
// 编译后：所有 btn-primary 自动是紫色，圆角全局 0.5rem📚 推荐阅读
来自万象云档的免费在线书籍，点击封面直接阅读