如何用SASS自定义Bootstrap5.3的Alert组件？变量修改无效问题

Bootstrap 5.3起，Alert组件的变体样式不再依赖alert-variant()混合宏，而是通过遍历$alert-variants这个Sass映射来生成对应的CSS变量和样式。默认情况下，这个映射里的primary、secondary变体并没有和你自定义的$primary、$secondary变量绑定，所以直接修改这两个变量不会同步Alert的颜色。

解决方案 #

在导入Bootstrap主文件前，自定义$alert-variants映射，将你设置的主题色关联到对应的Alert变体上，有两种方式可选：

方式一：关联Bootstrap自动生成的CSS变量

利用Bootstrap根据$primary、$secondary自动生成的背景、边框、文字色CSS变量，保持Alert和其他组件样式的一致性：

$purple-dark:  #9926f0;
$purple-light:  #BB6EF5;
$pink:    #d122e3;

$primary:       $purple-dark;
$secondary:     $pink;

// 自定义Alert变体映射，覆盖默认配置
$alert-variants: (
  "primary":    (
    "background": var(--#{$prefix}primary-bg),
    "border": var(--#{$prefix}primary-border),
    "color": var(--#{$prefix}primary-text)
  ),
  "secondary":  (
    "background": var(--#{$prefix}secondary-bg),
    "border": var(--#{$prefix}secondary-border),
    "color": var(--#{$prefix}secondary-text)
  ),
  // 保留其他默认变体（按需删除）
  "success":    (
    "background": var(--#{$prefix}success-bg),
    "border": var(--#{$prefix}success-border),
    "color": var(--#{$prefix}success-text)
  ),
  "danger":     (
    "background": var(--#{$prefix}danger-bg),
    "border": var(--#{$prefix}danger-border),
    "color": var(--#{$prefix}danger-text)
  ),
  "warning":    (
    "background": var(--#{$prefix}warning-bg),
    "border": var(--#{$prefix}warning-border),
    "color": var(--#{$prefix}warning-text)
  ),
  "info":       (
    "background": var(--#{$prefix}info-bg),
    "border": var(--#{$prefix}info-border),
    "color": var(--#{$prefix}info-text)
  ),
  "light":      (
    "background": var(--#{$prefix}light-bg),
    "border": var(--#{$prefix}light-border),
    "color": var(--#{$prefix}light-text)
  ),
  "dark":       (
    "background": var(--#{$prefix}dark-bg),
    "border": var(--#{$prefix}dark-border),
    "color": var(--#{$prefix}dark-text)
  )
);

@import "../node_modules/bootstrap/scss/bootstrap.scss";

方式二：直接指定具体颜色值

如果需要更精细的控制，可直接用自定义颜色值，并借助Sass函数生成适配的边框色和文字对比色：

$purple-dark:  #9926f0;
$purple-light:  #BB6EF5;
$pink:    #d122e3;

$primary:       $purple-dark;
$secondary:     $pink;

// 自定义Alert变体映射
$alert-variants: (
  "primary":    (
    "background": $purple-dark,
    "border": darken($purple-dark, 5%), // 生成比主色深5%的边框
    "color": contrast-color($purple-dark) // 自动生成高对比度文字色
  ),
  "secondary":  (
    "background": $pink,
    "border": darken($pink, 5%),
    "color": contrast-color($pink)
  )
);

@import "../node_modules/bootstrap/scss/bootstrap.scss";

原理说明 #

修改$alert-variants后，Bootstrap的Sass循环会基于这个映射生成每个Alert变体的CSS变量和样式规则，从而让Alert组件的颜色跟随你的自定义主题变量。

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