如何在Bootstrap 5.3.0中使用SASS设置警告框背景为纯色？

可以通过重写Bootstrap的SASS变量实现，无需修改现有HTML标记，具体方法如下：

核心原因 #

Bootstrap默认会对主题色（比如$danger）做淡化处理生成警告框背景色，你之前尝试的$alert-bg-scale变量在Bootstrap 5及以后版本已不再使用，所以修改它没有效果。

具体实现 #

Bootstrap为每个类型的警告框都定义了独立的背景色变量，直接重写这些变量就能让背景色变为对应主题色的纯色：

单个警告框修改（以alert-danger为例） #

// 先引入Bootstrap的变量文件
@import "bootstrap/variables";

// 将alert-danger的背景色设置为$danger的纯色
$alert-danger-bg: $danger;

// 引入Bootstrap主文件
@import "bootstrap";

所有警告框统一修改 #

如果需要让所有类型的警告框背景色都对应主题色的纯色，一次性重写所有变量即可：

@import "bootstrap/variables";

$alert-primary-bg: $primary;
$alert-secondary-bg: $secondary;
$alert-success-bg: $success;
$alert-danger-bg: $danger;
$alert-warning-bg: $warning;
$alert-info-bg: $info;
$alert-light-bg: $light;
$alert-dark-bg: $dark;

@import "bootstrap";

编译后的CSS会自动替换原有警告框的背景色，你可以继续保留现有使用alert类的HTML标记，无需额外添加bg-danger这类类。

内容的提问来源于stack exchange，提问作者Chris