Sobrescribir y personalizar mixins de Bootstrap

Publicado por Anderzone Heller
hace 1 año

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

Respuesta de Gordon Shumway
hace 5 meses

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 5 meses

Mil gracias Gordon!!!

Para poder participar del foro necesitas iniciar sesión con tu cuenta. Si no tienes una puedes registrarte utilizando tu email!

Iniciar sesión Quiero registrarme