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 ：How to extend/modify (customize) Bootstrap 4 with SASS。

在您的情况下，您必须覆盖地图$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会循环在$theme-colors文件中找到的地图调用_variable.scss。

$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);
  }
}

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

4 个答案: