必须在@import前重定义$primary变量；正确顺序为先声明$primary: #2563eb;，再依次导入functions、variables、maps、utilities和bootstrap，否则变量锁定无效且新增主题色需显式调用@include theme-colors()。

改 $primary 变量必须在 @import 之前做

直接重定义 $primary 是最稳的起点，但前提是它出现在 Bootstrap 的 Sass 模块加载顺序最前面。一旦 @import "bootstrap/scss/functions" 执行，所有带 !default 的变量就锁死了，后续赋值无效。

正确顺序长这样（写在你的 custom.scss 里）：

$primary: #2563eb;
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/bootstrap";

• 漏掉 @import "bootstrap/scss/maps"？$theme-colors 扩展可能不生效
• 把 $primary 写在 @import "bootstrap/scss/variables" 后面？编译时读到的还是默认值
• 用 bootstrap.min.css 加载？Sass 变量修改完全没机会运行——你压根没进编译流程

新增颜色如 brand 必须调用 @include theme-colors()

只往 $theme-colors 里加 "brand": #059669 不够，Bootstrap 默认只对内置键（primary、success 等）生成工具类。新颜色不会自动产出 .bg-brand 或 .text-brand。

你需要显式触发生成逻辑：

$theme-colors: map-merge($theme-colors, (
  "brand": #059669
));
@include theme-colors();

• @include theme-colors() 来自 bootstrap/scss/utilities/_api.scss，确保该文件已被导入
• 键名必须是字符串（带引号），否则编译报错 Invalid CSS after ""
• 如果浏览器 DevTools 里搜不到 .bg-brand，大概率是 theme-colors() 没执行，或 utilities 模块根本没引入

--bs-primary 只对部分组件实时生效

CSS 自定义属性（如 --bs-primary）从 Bootstrap 5.2 开始支持，但它不是万能开关。只有明确使用了这些变量的组件才会响应，比如 .btn-primary 靠 --bs-btn-bg，.alert-primary 靠 --bs-alert-bg。

以下情况它不工作：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 老组件仍硬编码 Sass 值（比如某些表单控件的边框色）
• 第三方图标库（如 bootstrap-icons）用 SVG 内联 fill，不读 CSS 变量
• 你自己写的封装组件没主动接 --bs-* 变量，那它就跟主题无关

全局覆盖可写：

:root {
  --bs-primary: #1e40af;
}

但更安全的做法是局部作用域：

.my-theme {
  --bs-primary: #059669;
}

别漏掉 $primary-rgb 这类衍生变量

只改 $primary 会导致很多地方出问题：比如 .alert-primary 文字对比度不足、.bg-primary-subtle 背景发灰、.btn-outline-primary 边框透明度异常。

必须同步设置这些配套变量：

• $primary-rgb: 37, 99, 235;（用于 rgba(var(--bs-primary-rgb), .1) 场景）
• $primary-text-emphasis: #1e293b;（深色文字在主色背景上的可读性）
• $primary-bg-subtle: #e0f2fe;（浅色背景块，如 .bg-primary-subtle）

它们不是可选的——是 Bootstrap 内部样式计算链的一环。漏一个，就可能让某个组件在深色模式下突然不可读，或者响应式断点处颜色跳变。

真正容易被忽略的是：变量顺序、CSS 变量与 Sass 变量的双轨并存、以及第三方组件是否真的尊重你的主题配置——它们往往静默绕过，直到上线才暴露。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！