如何在 Bootstrap 4 Sass 中更改按钮背景颜色和颜色？答案

【问题标题】：How to change button background colors and colors in Bootstrap 4 Sass?如何在 Bootstrap 4 Sass 中更改按钮背景颜色和颜色？
【发布时间】：2020-02-01 02:37:22
【问题描述】：

对于一个项目，我必须使用来自一些现成设计的某些自定义颜色定义。这是我第一个使用 Bootstrap 的项目 (https://mdbootstrap.com/docs/jquery/)。

为了遵守设计指南，我自己编译 Bootstrap SASS 文件，方法是从 node_modules 文件夹中包含它，如下所示：

// override BMD variables here@import "reset";
@import "variables_bootstrap";
@import "variables_mdb";

// import BMD
@import "../../../../node_modules/bootstrap-material-design/scss/core";

在 variables_bootstrap.scss 中，我拥有所有引导变量并根据我的需要更改它们（断点、主题颜色等）。

说到按钮，我有很多选择：

$btn-padding-y:               $input-btn-padding-y;
$btn-padding-x:               $input-btn-padding-x;
$btn-font-family:             $input-btn-font-family;
$btn-font-size:               $input-btn-font-size;
$btn-line-height:             $input-btn-line-height;

$btn-padding-y-sm:            $input-btn-padding-y-sm;
$btn-padding-x-sm:            $input-btn-padding-x-sm;
$btn-font-size-sm:            $input-btn-font-size-sm;
$btn-line-height-sm:          $input-btn-line-height-sm;

$btn-padding-y-lg:            $input-btn-padding-y-lg;
$btn-padding-x-lg:            $input-btn-padding-x-lg;
$btn-font-size-lg:            $input-btn-font-size-lg;
$btn-line-height-lg:          $input-btn-line-height-lg;

$btn-border-width:            $input-btn-border-width;

$btn-font-weight:             $font-weight-normal;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width:             $input-btn-focus-width;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow;
$btn-disabled-opacity:        .65;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);

$btn-link-disabled-color:     $gray-600;

$btn-block-spacing-y:         .5rem;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           $border-radius;
$btn-border-radius-lg:        $border-radius-lg;
$btn-border-radius-sm:        $border-radius-sm;

$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

但似乎没有任何关于颜色的设置。我的 HTML 是这样的：

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>

这是按钮的样子：

嗯，颜色就像我定义的那样，但我希望颜色是背景色[透明]，实际颜色是白色。也许我只是错过了一些明显的东西 - 你知道如何解决这个问题吗？

注意：使用 !important 对每个生成的按钮进行硬编码覆盖不是我正在寻找的解决方案。

【问题讨论】：

我认为这里已经回答了这个问题：stackoverflow.com/questions/49184471/…
@Senpai.D 不，它有效。太棒了，非常感谢:-D 我仍然想知道为什么在文档中他们不使用这些类？ mdbootstrap.com/docs/jquery/components/buttons

标签： html twitter-bootstrap sass bootstrap-4 bootstrap-material-design

【解决方案1】：

对我来说，只要我添加一些额外的引导类，它就可以工作：

<button type="button" class="btn btn-pink bg-pink text-white">Pink</button>
<button type="button" class="btn btn-purple bg-purple text-white">Purple</button>

仍然欢迎回答为什么这与文档不同。

【讨论】：