Bootstrap主题色修改：用Sass变量编译自定义CSS样式

许多开发者尝试修改 Bootstrap 的 $primary 变量时，明明在自定义文件里写好了 $primary: #ff6b35，但编译出的样式却毫无变化——这种困惑在实战中屡见不鲜。根本原因在于变量重定义的位置不对。Sass 变量的工作机制是“首次声明即生效”，后续的重新赋值会被直接忽略。因此，如果在 @import "bootstrap" 之后才去修改 $primary，Bootstrap 内部的默认变量早已被锁定，无法被覆盖。

正确的做法是：在导入 Bootstrap 任何源文件之前，先单独引入一个自定义变量文件，例如 _custom-variables.scss，并在声明变量时加上 !default 标记。这样，你自己设定的值就能覆盖 Bootstrap 的默认值。举例说明：

// _custom-variables.scss
$primary: #ff6b35 !default;
$secondary: #6c757d !default;
$border-radius: 0.375rem !default;

接着，主入口文件必须严格按照以下顺序导入：

@import "custom-variables";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
// ……其余模块

请注意，functions、variables、mixins 这三层依赖关系必须按序排列，否则编译时会报错，或者某些变量根本找不到，导致主题色自定义失败。

修改 $blue 变量后，为什么 .btn-primary 的颜色没变？

Bootstrap 5+ 内部将语义颜色（比如 $primary）和基础颜色（比如 $blue）完全分离了。.btn-primary 这类组件使用的是 $primary，而 $blue 仅影响工具类，例如 .text-blue、.bg-blue。因此，如果你只想更换整套主题色，直接修改 $primary 即可。如果确实希望将 .text-blue 也变成自定义颜色，那就需要同步修改 $blue——但必须清楚，这会影响到所有显式使用了 blue 类的地方，包括警告框中的图标、部分组件的边框等。

• $primary 控制 .btn-primary、.alert-primary、进度条、表单焦点环等
• $blue 仅影响 .text-blue、.bg-blue、.border-blue 这类工具类
• 不建议直接修改 $theme-colors Map 本身，除非你要新增色系（如 purple）

编译时报错 Undefined variable: "$font-size-base"，该怎么办？

这个错误通常是因为遗漏了 functions 或 variables 的导入，或者导入顺序搞反了。Bootstrap 的 Sass 源代码采用分层设计：mixins 依赖 functions，components 依赖 variables 和 mixins。因此，一个最小可用的导入链必须包含：

@import "bootstrap/scss/functions";   // 必须最先
@import "bootstrap/scss/variables";   // 其次（含所有 $xxx 变量）
@import "bootstrap/scss/mixins";      // 之后（含 color(), theme-color() 等函数）

遗漏 functions，像 theme-color() 这类内置函数就无法使用；遗漏 variables，所有 $xxx 变量都会变成 undefined。另外，请务必确认你引入的是 Bootstrap 官方 npm 包（bootstrap），而不是已经废弃的 bootstrap-sass 或者只包含编译后 CSS 的 CDN 版本（后者根本没有 Sass 源码）。

编译后 CSS 体积突然暴涨？可能是因为没按需导入

如果直接使用 @import "bootstrap/scss/bootstrap"，Bootstrap 会把所有组件（carousel、dropdown、tooltip……）全部打包进来，哪怕你的项目只用了按钮和表单。实际开发中，我们应该只导入需要的部分，例如：

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/utilities";

去掉 carousel、modal、tooltip 这些不用的模块，最终 CSS 体积能减少 30% 以上。工具类（utilities）也可以进一步精简，通过自定义 $utilities Map 来过滤掉不需要的工具。还有一个容易被忽视的细节：每次修改变量后，必须重新完整编译整个 Sass 流程，而不能只编译局部文件——因为 variables 的变更会渗透到所有依赖它的模块，增量编译很可能无法触发全部重新计算。