SASS - Bootstrap 4 - Error al intentar usar la combinación de 'tamaño de botón'

0

Recibo un error al intentar usar la combinación de tamaño de botón de Bootstrap 4 (versión 4.3.1 )

Este es el código del mixin que estoy tratando de incluir (tomado de ' \ node_modules \ bootstrap \ scss \ mixins \ _buttons.scss '):

@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
  padding: $padding-y $padding-x;
  @include font-size($font-size);
  line-height: $line-height;
  // Manually declare to provide an override to the browser default
  @include border-radius($border-radius, 0);
}

Este es un fragmento del código Bootstrap Sass en los node_modules de mi proyecto donde se usa el mixin (' \ node_modules \ bootstrap \ scss \ _buttons.scss ') - mixin se incluye en la línea 17 :

// stylelint-disable selector-no-qualifying-type

//
// Base styles
//

.btn {
  display: inline-block;
  font-family: $btn-font-family;
  font-weight: $btn-font-weight;
  color: $body-color;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: $btn-border-width solid transparent;
  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
  @include transition($btn-transition);

  @include hover {
    color: $body-color;
    text-decoration: none;
  }

  &:focus,
  &.focus {
    outline: 0;
    box-shadow: $btn-focus-box-shadow;
  }

  // Disabled comes first so active can properly restyle
  &.disabled,
  &:disabled {
    opacity: $btn-disabled-opacity;
    @include box-shadow(none);
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    @include box-shadow($btn-active-box-shadow);

    &:focus {
      @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
    }
  }
}

Así es como incluyo el mixin en mi código:

.my-btn {
  // $padding-y: 0.5rem
  // $padding-x: 0.25rem
  // $font-size: 0.875rem
  // $line-height: 1.5
  // $border-radius: 0.25rem
  @include button-size(0.5rem, 0.25rem, 0.875rem, 1.5, 0.25rem);
}

Este es el error que recibo:

Failed to compile.

./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
          ^
      Wrong number of arguments (2 for 1) for `border-radius'
      in ***\node_modules\bootstrap\scss\mixins\_buttons.scss (line 106, column 12)

El error está relacionado con el argumento border-radius, pero no entiendo por qué ve 2 argumentos cuando paso solo uno.

1
  • Importé todo el Bootstrap en mi archivo styles.scss de acuerdo con esta página de la documentación de Bootstrap: getbootstrap.com/docs/4.3/getting-started/theming/#importing 12/06/20 a las 13:53
0

¿Cómo se importan los mixins?

si importa desde node_modules, necesita al menos importar 3 scss

  • function.scss
  • variable.scss
  • mixins.scss
0
0

El mixin de tamaño de botón usa otro mixin de tamaño de fuente:

// Button sizes
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
  padding: $padding-y $padding-x;
  @include font-size($font-size);
  line-height: $line-height;
  // Manually declare to provide an override to the browser default
  @include border-radius($border-radius, 0);
}

El mixin del tamaño de fuente convierte un flotante en un valor rem con un respaldo de px.

// Rem output with px fallback
@mixin font-size($sizeValue: 1) {
    font-size: ($sizeValue * 16) * 1px;
    font-size: $sizeValue * 1rem;
}

Por lo tanto, debe eliminar las unidades del tercer parámetro y simplemente agregar un flotador para rem sin especificar rem.

1
  • Traté de eliminar rem del tamaño de fuente, pero todavía me da el mismo error 23 feb a las 14:03