Comment corriger l'erreur 'styles.bundle.js:33 non détectée' dans Angular-CLI lors de l'utilisation de SCSS ?

Dépannage de l'erreur "styles.bundle.js:33Uncaught Error" lors de l'utilisation d'Angular-CLI avec SCSS

Vous avez rencontré un problème où Angular -CLI renvoie l'erreur "styles.bundle.js:33Uncaught Error" lors de l'utilisation de SCSS. Bien que la documentation indique que l'exécution de ng set defaults.styleExt scss devrait résoudre ce problème, cela ne fonctionne pas pour vous. Explorons les raisons derrière cela et fournissons une solution complète.

Cause de l'erreur

L'erreur se produit car la CLI tente toujours de trouver et de regrouper les fichiers CSS pour style. Angular-CLI démarre initialement avec CSS comme extension de style par défaut. Lorsque vous essayez d'utiliser SCSS, la CLI doit être configurée pour reconnaître et traiter les fichiers SCSS.

Solution pour les projets existants

1. Mettre à jour l'extension de style par défaut :

   • Dans Angular 5.x et versions antérieures, modifiez le Fichier .angular-cli.json.
   • Dans Angular 6, modifiez le fichier angulaire.json.
   • Vous pouvez également exécuter ng config defaults.styleExt=scss. Si cela entraîne une erreur, utilisez ng config Schematics.@schematics/angular:component.styleext scss.

2. Renommer les fichiers CSS en SCSS :

   • Modifiez les styles.css et les fichiers CSS des composants (par exemple, app/app.component.css) vers styles.scss et les fichiers SCSS des composants correspondants.

3. Mettre à jour Angular.json (uniquement pour Angular 6) :

   • Modifiez les extensions de fichiers dans apps[0].styles dans angulaire.json.

4. Pointez les composants vers de nouveaux fichiers de style :

   • Modifiez les propriétés styleUrls dans les définitions des composants en correspondre au nouveau fichier SCSS noms.

Solution pour les projets futurs

1. Définir l'extension de style lors de la création du projet :

   • Lors de la création d'un nouveau projet à l'aide de ng new, précisez --style=scss.

2. Définir le style global par défaut :

   • Si vous préférez avoir SCSS comme style par défaut extension pour tous les projets futurs, exécutez :

   ng config --global defaults.styleExt=scss

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!