在Boostrap 4中覆盖/自定义混合插件

Question

我试图在Bootstrap 4中自定义徽章类。我试图实现的是显示带有轮廓的所有徽章（类似于.btn-outline- *）。现在，我（天真）尝试通过如下方式“覆盖”单独样式表中的混合来做到这一点：

@mixin badge-variant($bg) {
  //color: color-yiq($bg); #original
  color: $bg;
  background-color: transparent;
  border: 1px solid $bg;

  &[href] {
    @include hover-focus {
      //background-color: darken($bg, 10%); #original
      background-color: $bg;
    }
  }
}

@import "node_modules/bootstrap/scss/bootstrap";

这怎么不起作用？我该怎么做才能自定义mixin（不编辑原始文件）？ 谢谢！

Answer 1

它应该可以工作，但是请记住，您必须先@import bootstrap，然后再生成badge-*类...

@import "bootstrap";

@mixin badge-variant($bg) {
  color: $bg;
  background-color: transparent;
  border: 1px solid $bg;

  &[href] {
    @include hover-focus {
      background-color: $bg;
    }
  }
}

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

演示：https://www.codeply.com/go/Iq1RJ96AmW

Answer 2

如何像这样覆盖.badge类并拥有border。

CSS

.badge {
      border: 2px solid #ff0000
 }

包含徽章的HTML示例

<div class="container mt-4">
        <div class="row">
          <div class="col-12">
            <h1>Example heading <span class="badge badge-secondary">New</span></h1>
      <h2>Example heading <span class="badge badge-secondary">New</span></h2>
      <h3>Example heading <span class="badge badge-secondary">New</span></h3>
      <h4>Example heading <span class="badge badge-secondary">New</span></h4>
      <h5>Example heading <span class="badge badge-secondary">New</span></h5>
      <h6>Example heading <span class="badge badge-secondary">New</span></h6>
          </div>
        </div>
  </div>

一个示例

https://codepen.io/anjanasilva/pen/MPmxJd

我希望这会有所帮助。干杯。