Bootstrap 5.1中如何为$theme-colors设置rgba格式颜色值

你的配置不生效核心是两个错误：

• 变量定义顺序错误：Bootstrap所有内置Sass变量都带!default标记，自定义变量必须写在导入Bootstrap文件之前，否则你写的变量会被Bootstrap自带的默认值直接覆盖，完全不会参与编译。
• 颜色处理逻辑冲突：Bootstrap内部生成主题色对应的组件状态（hover、active态、明暗变体）时，会调用tint()、shade()这类颜色混合函数，这类函数默认会剥离颜色的alpha通道，最终输出不带透明度的rgb值。

• 调整文件结构，把所有自定义变量、颜色映射的定义移到@import语句之前，最后再导入Bootstrap。
• 如果需要组件的交互状态也保留rgba透明度，不要依赖Bootstrap默认的自动混色逻辑，单独覆盖对应组件的颜色变量即可。

完整可运行的style.scss代码如下：

// 1. 先定义基础颜色值
$blue: rgba(#0000ff, .37);
$primary: $blue;

// 2. 自定义颜色映射、主题色映射，必须在导入前完成
$colors: (
  "blue": $blue
);
$theme-colors: (
  "primary": $primary
);

// 3. （可选）如果需要按钮等组件的交互态也保留半透明，在这里覆盖对应组件变量
$btn-primary-bg: $primary;
$btn-primary-hover-bg: rgba(#0000ff, 0.5); // 自定义hover态半透值
$btn-primary-active-bg: rgba(#0000ff, 0.6); // 自定义点击态半透值
$btn-primary-border-color: transparent;

// 4. 最后导入Bootstrap
@import "~bootstrap/scss/bootstrap";

按上面的配置编译后，.bg-primary、.text-primary、.btn-primary等所有主色相关的样式都会输出你定义的rgba格式颜色，不会被转成不带透明度的rgb值，也不需要额外使用opacity属性。

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