Comment convertir mon projet Angular-CLI de CSS en SCSS ?

Conversion de projets Angular-CLI de CSS en SCSS

Lorsque vous essayez d'utiliser SCSS dans un projet Angular-CLI, vous pouvez rencontrer une erreur concernant la non-existence d'un fichier styles.css. Cette erreur se produit malgré la définition de l'extension de style par défaut sur SCSS à l'aide de la commande ng set defaults.styleExt scss.

Solution :

Pour résoudre ce problème, suivez ces étapes :

Pour les projets existants (versions Angular CLI antérieures à 6):

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

   • Modifiez manuellement le fichier .angular-cli.json et remplacez css par scss dans le tableau styles.

   • Vous pouvez également exécuter le commande :

     ng config defaults.styleExt=scss

2. Convertir les fichiers CSS existants en SCSS :

   • Renommer tous les fichiers .css existants en .scss, y compris styles.css.

3. Ajuster la construction configuration :

   • Modifiez la propriété apps[0].styles dans le fichier .angular-cli.json et remplacez les extensions .css par .scss.

4. Mettre à jour les styles de composants :

   • Modifiez le tableau styleUrls dans vos fichiers de composants pour qu'il pointe vers le nouveaux fichiers .scss.

Pour les projets existants (Angular CLI version 6) :

Utilisez les mêmes étapes que ci-dessus, en éditant le fichier angulaire.json au lieu de .angular-cli.json. De plus, si vous rencontrez une erreur « La valeur est introuvable », exécutez la commande suivante :

ng config schematics.@schematics/angular:component.styleext scss

Pour les nouveaux projets :

1. Spécifiez SCSS comme extension de style lors de la création d'un nouveau projet :

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

2. Définissez SCSS comme extension de style par défaut pour tous les projets futurs (facultatif) :

   ng config --global defaults.styleExt=scss

En suivant ces étapes, vous configurerez avec succès votre projet Angular-CLI pour utiliser 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!