修改Bootstrap SCSS主色后，如何通过全局变量固定文本为白色？

Bootstrap默认会根据背景色的亮度自动计算按钮文本颜色（通过对比度算法），当你设置的$primary色调偏亮时，它会自动切换为黑色文本以保证可读性。要强制primary按钮始终使用白色文本，只需在导入Bootstrap SCSS前，覆盖对应的全局变量即可：

1. 在你的自定义SCSS文件中，先定义主色和按钮文本颜色变量：

// 自定义主色（可根据需求修改）
$primary: #e70080;

// 强制primary按钮文本为白色
$btn-primary-color: #ffffff;
// 可选：同步设置hover/active状态下的文本颜色，保持交互统一
$btn-primary-hover-color: #ffffff;
$btn-primary-active-color: #ffffff;

2. 导入Bootstrap的SCSS文件（务必保证变量定义在导入操作之前）：

@import "bootstrap";

编译资源后，无论你设置的$primary是深色还是浅色，primary按钮的文本都会始终保持白色，完全符合统一的设计要求。

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