修改$theme-colors后不生效，需在导入Bootstrap变量前重定义，并调用@include theme-colors()生成工具类，且手动添加CSS变量--bs-custom-blue。
修改 $theme-colors 变量后不生效？检查 Sass 编译入口是否引入了自定义变量
bootstrap 5 的主题色由 $theme-colors 这个 sass map 控制，但直接改 bootstrap 源码里的 _variables.scss 不起作用——你得在自己的主 sass 文件里，**在导入 bootstrap 前**重定义它。
- 必须在
@import "bootstrap/scss/functions";之后、@import "bootstrap/scss/variables";之前覆盖$theme-colors - 如果用了
@import "bootstrap/scss/bootstrap";一键导入，那自定义变量会被忽略 - 常见错误：把新颜色写在
bootstrap.scss文件末尾，此时变量早已被读取并生成 CSS 类了
// ✅ 正确顺序（你的 custom.scss） @import "bootstrap/scss/functions"; $theme-colors: ( "primary": #2563eb, "secondary": #64748b, "custom-blue": #0f766e ); @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; // ... 其他 import
新增的 theme-color 没生成 .btn-custom-blue 或 .text-custom-blue 类？确认启用了 color mode 支持
Bootstrap 默认只对内置 key（如 primary、success）生成工具类。新增的 key（比如 custom-blue）不会自动产出对应类名，除非你手动调用生成逻辑。
- 需要显式调用
@include theme-colors()，它会遍历$theme-colors并输出所有.bg-*、.text-*、.border-*等类 - 该 mixin 在
bootstrap/scss/utilities/_api.scss中定义，所以确保已导入utilities/api或完整utilities - 若只导入部分模块（如跳过 utilities），新颜色类将完全缺失
// 在 custom.scss 末尾补上 @import "bootstrap/scss/utilities"; @include theme-colors(); // ? 关键：触发新颜色类生成
编译后 CSS 里有 --bs-primary 但没 --bs-custom-blue？CSS 自定义属性需手动注入
Bootstrap 5.3+ 引入了 CSS 变量支持（如 --bs-primary），但这些变量只从内置 $theme-colors key 映射而来，**不自动识别你新增的 key**。
- 要让
--bs-custom-blue出现在:root中，得自己加 CSS 变量声明 - 推荐在
:root块中手动写：--bs-custom-blue: #0f766e; - 或者用 Sass 循环生成（注意：Bootstrap 官方 mixin 不处理非标准 key）
- 否则 JavaScript 通过
getComputedStyle读不到这个变量，color-mode切换也无效
:root {
--bs-custom-blue: #0f766e;
}
用 var(--bs-custom-blue) 时颜色错乱或 fallback 失效？检查 CSS 变量作用域和浏览器兼容性
CSS 变量默认继承且作用域为当前选择器，但 Bootstrap 的 utility 类（如 .text-custom-blue）内部用的是 Sass 颜色值，不是 var()，所以不能靠 CSS 变量动态切换——除非你重写了 utility 规则。
- 如果你在自定义类里写
color: var(--bs-custom-blue, #0f766e);，要确保:root已定义该变量，且无拼写错误（大小写、连字符） - Safari 15.4 之前不支持
color-scheme: dark下自动切换 CSS 变量，别依赖它做暗色主题适配 - 避免在
@media (prefers-color-scheme: dark)里只改--bs-primary却漏掉--bs-custom-blue，导致视觉不一致
$theme-colors 就万事大吉，结果既没调 @include theme-colors()，也没补 CSS 变量，最后在 HTML 里写 class="text-custom-blue" 却什么都没渲染出来。 
