Erreur de syntaxe SCSS avec $theme-colors - expected ":

Question

Bonjour,
Je ne comprends pas d'où vient mon erreur...
Error: expected ":".
╷
1 │ $theme-colors("primary": #007bff);
│ ^
╵
design/default.scss 1:14 root stylesheet
Sur ma feuille de style j'ai utilisé le code suivant :
$theme-colors("primary");
@import "../node_modules/bootstrap/scss/bootstrap.scss";
Merci par avance.

Louis-Nicolas Leuillet · Accepted Answer

Salut Philippe !
Le souci vient de la syntaxe : $theme-colors est une variable de type map (un ensemble clé/valeur), donc il faut utiliser la syntaxe d'une map SCSS avec des parenthèses et le mot-clé de déclaration. Ce que tu as écrit ressemble à un appel de fonction, d'où l'erreur. Voici ce qu'il faut écrire :
$theme-colors: (
"primary": #007bff
);
@import "../node_modules/bootstrap/scss/bootstrap.scss";
En fait, la différence c'est le : après $theme-colors (comme pour toute déclaration de variable SCSS), et ensuite les parenthèses contiennent la map avec tes paires clé/valeur. Toi tu avais écrit $theme-colors("primary") comme si tu essayais de lire une valeur dans une map existante, alors qu'on veut ici déclarer cette variable avant l'import de Bootstrap. Du coup Sass ne comprenait pas ce que tu voulais faire et attendait un : après le nom de la variable.
Essaie avec cette correction, ça devrait rouler !