如何在SCSS中修改自定义Bootstrap5按钮的文字颜色为白色

架构老林

2026-8-29

问题原因

两个原因导致的：

纯红red（色值#ff0000）和白色的对比度只有3.99:1，刚好低于Bootstrap 5默认的4.5:1最低对比度阈值，Bootstrap内置的对比度计算逻辑会自动判定黑色文字在这个背景上可读性更好，所以默认渲染成黑字。
你的Sass导入顺序不对，自定义配置要放在Bootstrap基础依赖导入之后、全量核心导入之前，不然自定义规则可能不生效。

解决方法

按需选择即可：

方案1：更换对比度达标的红色（最推荐，符合无障碍要求）

不要使用纯红，换成更深的、对比度达标的红色，比如Bootstrap自带的危险红#dc3545，Bootstrap会自动匹配白色作为按钮文字，不需要额外写覆盖样式。
正确的Sass代码顺序参考：

// 先导入Bootstrap的函数依赖，所有Sass工具方法都在这里
@import "bootstrap/scss/functions";
// 再导入Bootstrap默认变量
@import "bootstrap/scss/variables";

// 编写自定义配置
$myProject-colors: (
  "main": #dc3545, // 替换成你需要的、对比度达标的红色值
);
$theme-colors: map-merge($theme-colors, $myProject-colors);

// 最后导入Bootstrap全量核心
@import "bootstrap/scss/bootstrap";

编译完成后.btn-main默认就是白字红底的效果。

方案2：强制指定按钮文字颜色（必须使用纯红的场景选这个）

如果业务要求必须用纯红当按钮背景，可以直接手动指定这个主题色对应的按钮文字色，不需要额外写CSS覆盖：

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";

$myProject-colors: (
  "main": red,
);
$theme-colors: map-merge($theme-colors, $myProject-colors);

// 强制给main主题按钮指定白色文字
$btn-colors: (
  "main": $white,
);

@import "bootstrap/scss/bootstrap";