Sobrescribir y personalizar mixins de Bootstrap

Publicado por Anderzone Heller
hace 5 años

Estoy tratando de personalizar la clase 'badge' en Bootstrap 4. Lo que estoy tratando de conseguir es mostrar todos los badge con un borde (algo así como cuando ponen .btn-outline-*). Actualmente estoy tratando de hacer esto sobrescribiendo el mixin que trae Bootstrap en un archivo a parte:

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

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

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

Por qué esto no funciona? y que podría hacer para personalizar el mixin sin editar el archivo original? Gracias

css sass bootstrap
Respuesta de Gordon Shumway
hace 4 años

Lo que hiciste está bien, solo que tenés que cambiarlos de lugar. Primero incluís Bootstrap y luego definís el nuevo mixin:

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

// Esto después
@mixin badge-variant($bg) {
  color: $bg;
  background-color: transparent;
  border: 1px solid $bg;

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

Saludos

Respuesta de Anderzone Heller
hace 4 años

Mil gracias Gordon!!!