必须在@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。
以下情况它不工作：
- 老组件仍硬编码 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 变量的双轨并存、以及第三方组件是否真的尊重你的主题配置——它们往往静默绕过，直到上线才暴露。
