Le SCSS de Bootstrap ne parvient pas à compiler - on obtient toujours l'erreur "`unit($number)` doit être un nombre".

Question

Je veux utiliser les grilles Bootstaps localement dans mon projet.

Je compile SCSS avec Gulp. Je peux confirmer que cela fonctionne bien - je suis capable de compiler mes propres fichiers SCSS.

Cependant, lorsque j'ajoute un fichier Bootstrap .scss, j'obtiens l'erreur suivante :

actifs \scss\bootstrap_scss_functions.scss Erreur : argument $number de unit($number) doit être un nombre

Cela se produit à la fois avec Bootstrap 4.5.3 et 5.0 Alpha.

Mon fichier app.scss ressemble à ça :

@import 'bootstrap_scss/_functions';
@import 'bootstrap_scss/_variables';
@import 'bootstrap_scss/_mixins';

@import 'bootstrap_scss/bootstrap-reboot';
@import 'bootstrap_scss/bootstrap-grid';

J'ai également essayé la version NPM de Bootstrap, mais j'obtiens les mêmes résultats.

Quelqu'un sait-il ce que je devrais faire ?

Answer 1

En regardant le code source de _functions.scss y _variables.scss il semble que vous surchargez soit $container-max-widths et/ou $grid-breakpoints variable(s).

Assurez-vous que les deux variables ont une valeur numérique pour la valeur dans la carte. Les valeurs par défaut sont :

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;