如何覆盖Bootstrap 5.0的info颜色使其与Bootstrap 3一致？

Bootstrap 3里bg-info和alert-info的背景色都是#d9edf7，但到了Bootstrap 5，直接调整$info变量会出现矛盾：

• 设$info: #d9edf7;时，.bg-info显示正常，但.alert-info会被自动提亮60%，颜色不对
• 设$info: #40a4d7;时，.alert-info显示正常，但.bg-info比目标色#d9edf7深40%

要让所有使用info配色的元素背景色统一为#d9edf7，可以用以下两种方法：

方法一：通过SCSS变量覆盖（推荐，符合Bootstrap定制规范） #

Bootstrap 5中，alert组件的背景色是用theme-color-level()函数对主题色做亮度调整生成的，info类型的alert默认会提亮60%。要跳过这个计算，直接指定alert的背景色：

// 自定义变量必须写在导入Bootstrap之前
$info: #d9edf7;

// 覆盖alert的背景色变量，将info项直接设为目标色
$alert-bg: (
  "info": $info
);

// 导入Bootstrap核心SCSS
@import "bootstrap";

编译后，.bg-info和.alert-info的背景色都会是#d9edf7。

方法二：直接用CSS覆盖（无需SCSS编译） #

如果不使用SCSS工作流，直接在自定义CSS文件里（放在Bootstrap CSS之后加载）覆盖样式：

.bg-info, .alert-info {
  background-color: #d9edf7;
}

如果遇到优先级问题，再加!important强制覆盖：

.bg-info, .alert-info {
  background-color: #d9edf7 !important;
}

测试示例 #

<!-- 如果用SCSS编译，替换成自己编译的CSS文件链接 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="alert alert-info" role="alert">
  一个简单的info提示框——看看效果！
</div>

<div class="bg-info" style="width:100%; height:60px; padding: 10px;">
这两个元素的背景色应该一致，因为它们都使用了'info'配色
</div>

原理说明 #

Bootstrap 5对不同组件的主题色使用逻辑不同：bg-*类直接复用主题色变量，而alert-*类会对主题色做亮度偏移处理（info类型是+60%亮度），所以单独修改$info变量无法同时满足两个组件的颜色需求，必须针对性覆盖alert的背景色配置。

内容的提问来源于stack exchange，提问作者Smitty-Werben-Jager-Manjenson