Résoudre l’erreur de compilation _root.scss

Depuis les début de la version 4 de Bootstrap, la compilation de vos fichiers SCSS peut générer une erreur au niveau du fichier _root.scss. Nous allons voir ensemble comment résoudre ce problème.

Posté le par Benoît Philibert|578 vues

Depuis la version 4 de Bootstrap, une erreur est générée lors de la compilation de vos fichiers SCSS. Cette erreur est localisée au niveau du fichier _root.scss. Nous découvrirons l’utilité de ce fichier apparu à la version 4 du framework, avant de résoudre le problème de compilation.

À quoi sert _root.scss ?

Comme nous venons de l’évoquer, ce fichier n’existait pas durant la version 3+ de Bootstrap. Le fichier :root peut être utile lorsqu’on déclare des propriétés CSS personnalisées globales.

Explications MDN

Lien vers MDN (Mozilla Dev Net)

Les noms des propriétés qui sont préfixés par deux tirets : -- (par exemple : --nom-exemple) représentent des propriétés personnalisées (custom properties) qui peuvent contenir une valeur qui pourra être réutilisée dans le document grâce à la fonction var.

La portée des propriétés personnalisées est celle des éléments sur lesquels elles sont déclarées. Ces personnalisées contribuent à la cascade : la valeur utilisée d’une propriété personnalisée sera déterminée par l’algorithme de la cascade.

Cette fonction est expérimentale Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs. Il convient de noter qu’une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

Composition du fichier :


:root {
  // Custom variable values only support SassScript inside `#{}`.
  @each $color, $value in $colors {
    --#{$color}: #{$value};
  }

  @each $color, $value in $theme-colors {
    --#{$color}: #{$value};
  }

  @each $bp, $value in $grid-breakpoints {
    --breakpoint-#{$bp}: #{$value};
  }

  // Use `inspect` for lists so that quoted items keep the quotes.
  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
  --font-family-sans-serif: #{inspect($font-family-sans-serif)};
  --font-family-monospace: #{inspect($font-family-monospace)};
}

Erreur lors de la compilation de vos fichier SCSS

Erreur affichée par le terminal lors de la compilation des fichiers SCSS de Bootstrap :

Error: Invalid CSS after "...lor}: #{$value}": expected "{", was ";"
on line 4 of C:/bootstrap-4.0.0-beta.2/scss/_root.scss
from line 11 of C:\bootstrap-4.0.0-beta.2\scss\bootstrap.scss
Use --trace for backtrace.

Résoudre le problème

L’avantage principal de Bootstrap est d’être utilisé par des centaines de milliers de personnes tout les jours. Cela renforce l’aspect communautaire et de ce fait l’entraide entre les différents acteurs.

Fin 2017, l’issue #24549 « Can’t compile the SCSS file » créée par un utilisateur Bootstrap traite ce problème.

La solution proposée par @JanGalek est de modifier la syntaxe des lignes 4 à 11 du fichier _root.scss de la sorte :

Prise écran de la suggestion de JanGalek sur Github

Remplacez le code comme suggéré ci-dessus.


//
// code obsolète à remplacer 
//
//@each $color, $value in $colors {
//  --#{$color}: #{$value};
//}
//
//@each $color, $value in $theme-colors {
//  --#{$color}: #{$value};
//}
//

@each $color, $value in $colors {
  #{--#{$color}}: #{$value};
}

@each $color, $value in $theme-colors {
  #{--#{$color}}: #{$value};
}

Résultat après compilation CSS des lignes erronées :


:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #868e96;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #868e96;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
}

Après le changement de la syntaxe du fichier _root.scss vous ne rencontrerez plus aucune erreur de compilation SCSS.


Ces articles pourraient vous intéresser

Tags

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.