如何使用 SASS 覆盖引导程序“btn-primary”活动背景颜色？答案

【问题标题】：How to override Bootstraps "btn-primary" active background-color using SASS?如何使用 SASS 覆盖引导程序“btn-primary”活动背景颜色？
【发布时间】：2019-02-23 10:57:58
【问题描述】：

我正在使用带有 SCSS 的 bootstrap 4，并且无法找到负责活动“btn-primary”元素背景的变量。

当然，我可以在编译过程之后像这样覆盖 css 文件。

.btn-primary:not(:disabled):not(.disabled):active{
  background-color:red;
}

但这有点老套。我想不明白 bootstrap 是如何生成这种特殊颜色的？我很确定我错过了什么。

请查看此jsfiddle 并单击测试按钮以了解我的意思。

已解决：颜色存储在 $primary 中（谢谢 ReSedano）

做一个

$primary: #ff00ff;

在加载引导程序之前。

【问题讨论】：

标签： css twitter-bootstrap sass

【解决方案1】：

在这里你可以了解如何使用 scss 覆盖 boostrap4：How to extend/modify (customize) Bootstrap 4 with SASS。

在您的情况下，您必须覆盖地图$theme-colors：

$theme-colors: (
  "primary": #ff0000 // <= put here your color
);

要了解 “bootstrap 是如何生成这种特定颜色的？” 在_buttons.scss 文件中，您可以找到函数：

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
  }
}

所以要更改颜色，Bootstrap 循环调用您在 _variable.scss 文件中找到的地图调用 $theme-colors。

$theme-colors: () !default;

$theme-colors: map-merge(
  (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark
  ),
  $theme-colors
);

【讨论】：

【解决方案2】：

这是一个简单的错误。 bootstrap.css 在 style.css 之后如果是，你可以在 style.css 之前移动 bootstrap.css

喜欢

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/bootstrap/dist/css/bootstrap.min.css">
<!-- custom CSS -->
<link rel="stylesheet" href="css/style.css">

在 style.css 中使用 css

.btn-primary:not(:disabled):not(.disabled) {
background: red;
}

【讨论】：

【解决方案3】：

主题颜色在_variables.scss中定义

按钮在_buttons.scss中生成，使用button-variant() mixin

// _variables.scss
$theme-colors: map-merge(
  (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark
  ),
  $theme-colors
);

// _buttons.scss
@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
  }
}

【讨论】：