Comment réussir la transition de CSS vers SCSS dans les projets Angular CLI ?

Transition CLI angulaire de CSS à SCSS

Angular CLI offre la possibilité d'utiliser des feuilles de style SCSS dans vos projets. Cependant, si vous avez rencontré l'erreur « aucun fichier ou répertoire de ce type » lors de l'implémentation de SCSS, certaines étapes doivent être suivies.

Commande pour l'extension de style par défaut

Comme mentionné dans la documentation, l'exécution de "ng set defaults.styleExt scss" devrait définir l'extension de style par défaut sur SCSS. Cependant, cette commande peut ne pas toujours fonctionner comme prévu.

Solution pour les projets existants

1. Modifier l'extension de style par défaut en SCSS :

   • Modifiez le .angular-cli.json (Angular 5.x et versions antérieures) ou Fichier angulaire.json (Angular 6) pour définir manuellement "defaults.styleExt" sur "scss".

2. Renommer les fichiers CSS en SCSS :

   • Convertir les fichiers ".css" existants en ".scss" et mettre à jour les références dans le projet.

3. Pointez la CLI vers styles.scss :

   • Modifiez le tableau "styles" dans le fichier angulaire.json fichier pour pointer vers le nouveau styles.scss fichiers.

4. Mettre à jour les références des composants :

   • Ajustez la propriété "styleUrls" dans les fichiers de composants individuels pour refléter la mise à jour Noms de fichiers SCSS.

Définition par défaut pour Projets futurs

Lors de la création de nouveaux projets, vous pouvez spécifier l'extension de style lors de la création du projet :

ng new your-project-name --style=scss

Pour définir l'extension de style par défaut pour tous les nouveaux projets globalement :

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!