如何使用引导程序更改辅助按钮文本颜色？答案

【问题标题】：How do i change the secondary button text color with bootstrap?如何使用引导程序更改辅助按钮文本颜色？
【发布时间】：2021-12-01 18:32:40
【问题描述】：

我对 CSS 样式相当陌生，目前正在将引导程序加载到我的 scss 主文件中，我将一些颜色（主要、次要、危险等）设置为主题。

但是，由于 bootstrap/functions.scss 中的颜色对比功能，我的按钮文本似乎失真了。

我想继续对除“次要”颜色之外的所有颜色使用此功能。是否可以在不通过颜色对比函数的情况下覆盖它并定义 btn-secondary-color ？

目前我的 main.scss 看起来像这样：

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

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

$btn-secondary-color: white;

【问题讨论】：

欢迎来到 Stack Overflow！访问help center，使用tour 了解内容和How to Ask。请首先>>>Search for related topics on SO，如果您遇到困难，请发布您的尝试的minimal reproducible example，并使用[<>] 记录输入和预期输出sn-p 编辑器。

标签： javascript bootstrap-4

【解决方案1】：

覆盖引导变量

首先您必须导入引导程序，然后您可以为每个引导程序组件定义自定义样式。

例如：

@import 'node_modules/bootstrap/scss/bootstrap';

.btn-secondary {
  color: white;
}

更多信息here

【讨论】：