如何使用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);
  }
}