css - 如何使用 SASS 覆盖 Bootstraps "btn-primary"事件背景颜色？

Question

我在 SCSS 中使用 bootstrap 4，但很难找到负责激活“btn-primary”元素背景的变量。

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

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

但这有点hacky。我想了解 bootstrap 是如何生成这种特定颜色的？我很确定我遗漏了什么。

请看这个jsfiddle然后点击测试按钮看看我的意思。

已解决:颜色存储在 $primary 中(感谢 ReSedano)

就做一个

$primary: #ff00ff;

在加载 Bootstrap 之前。

Answer 1

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

在您的情况下，您必须覆盖 map $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 文件中找到的 map 调用 $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
);