如何使用SASS覆盖Bootstraps“ btn-primary”活动背景色？

Question

我正在将Bootstrap 4与SCSS一起使用，并且很难找到负责“ btn-primary”元素处于活动状态的背景的变量。

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

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

但这有点hacky。 我想了解引导程序是如何生成这种特定颜色的？ 我很确定我缺少什么。

请参阅此jsfiddle ，然后单击“测试”按钮以了解我的意思。

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

只是做一个

$primary: #ff00ff;

在加载引导程序之前。

Answer 1

这是一个简单的错误。 如果是，您可以将bootstrap.css移到style.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;
}

Answer 2

在这里您可以了解如何使用scss覆盖boostrap4 ： 如何 使用SASS 扩展/修改（自定义）Bootstrap 4 。

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

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

要了解“引导程序如何生成这种特定颜色？” 在_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
);

Answer 3

如果您访问https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css（它是引导程序的CDN），则会看到引导程序库的缩小版本。 每次将其用作CDN或下载文件时，都在使用CSS规则从该源中声明类。 随意填充以控制+ f并搜索.btn-primary:not(:disabled):not(.disabled):active以查看此类的规则。

而且，你是对的。 您的操作方式有些古怪。 您应该做的是将新类放在要覆盖引导规则的元素上，然后在css或scss中像这样使用它

.btn-primary.mycustombuttonclass {
    background: white; //for example
}

Answer 4

主题颜色在_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);
  }
}