如何在Bootstrap中自定义secondary按钮文字颜色且跳过color-contrast函数

Bootstrap的Sass变量全部带有!default标识，要覆盖变量必须在导入Bootstrap源码之前定义变量，你现有代码中将$btn-secondary-color写在导入语句之后，不会生效。

你完全可以单独指定$btn-secondary-color实现需求，不需要修改color-contrast函数的全局逻辑，其余颜色的按钮文字色仍会默认走对比度计算逻辑，不会受影响。

修正后的main.scss代码 #

$primary: #44698E;
$secondary: #90A1BC;
$danger: #D3745F;
$hoverblue: #edf6ff;
$darkblue: #103E67;
$dragoverGreen: #bfe3bf;
$dragoverRed: #e8a09e;

// 单独指定secondary按钮的文字色，优先级高于自动对比度计算
$btn-secondary-color: white;

// 最后导入Bootstrap源码
@import "../../node_modules/bootstrap/scss/bootstrap";

如果需要自定义悬停、激活状态下的secondary按钮文字色，可以同步定义对应变量，写法同理：

• $btn-secondary-hover-color：悬停状态文字色
• $btn-secondary-active-color：点击激活状态文字色

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