Résoudre l’erreur de compilation _root.scss

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.

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 :

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.