Angular-cli de css à scss

Question

J'ai lu la documentation qui dit que si je veux utiliser scss je dois exécuter la commande suivante:

 ng set defaults.styleExt scss
 

Mais quand je fais cela et crée ce fichier, je reçois toujours cette erreur dans ma console:

 styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open '/Users/Egen/Code/angular/src/styles.css'(…)
 

Comment puis-je réparer ça?

Answer 1

Angulaire 6 vérifiez la documentation Officielle

Remarque: Pour @angular/cli versions antérieures à la version 6.0.0-beta.6 utilisation ng set à la place de ng config.

Pour les projets existants

Dans un angulaires-cli projet qui a été mis en place avec la valeur par défaut css styles que vous aurez besoin de faire quelques petites choses:

1. Changer le style par défaut de l'extension à l' scss

Modifier manuellement .angulaire de la cli.json (Angulaire 5.x et plus) ou angulaire.json(Angulaire 6+) ou exécutez:

ng config defaults.styleExt=scss

2. Renommer votre .css fichiers d' .scss (c'est à dire les styles.css et app/app.composante.css)

3. Point de la CLI pour trouver des styles.scss

Modifier manuellement les extensions de fichier dans apps[0].styles angulaire.json

4. Point les composants de trouver votre nouveau style de fichiers

Modifier l' styleUrls dans vos composants pour correspondre à votre nouveau fichier de noms

Pour de futurs projets

@Serginho mentionné, vous pouvez définir le style de l'extension lors de l'exécution de l' ng new commande

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

Si vous souhaitez définir la valeur par défaut pour tous les projets que vous créez dans l'avenir, exécutez la commande suivante:

ng config --global defaults.styleExt=scss

Answer 2

À partir de ng6, ceci peut être accompli avec le code suivant ajouté à angular.json au niveau racine:

Changer manuellement en .angular.json :

 "schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
}
 

Answer 3

Ouvrir le fichier angular.json

1.change de

"schematics": {}

à

 "schematics": {
           "@schematics/angular:component": {
                   "styleext": "scss"       
             }  
  }
 

2. changer de (à deux endroits)

"src/styles.css"

à

"src/styles.scss"

puis vérifiez et renommez tous les .css fichiers et mettez à jour les fichiers Component.ts styleUrls à partir de .css to .scss

Answer 4

Pour angulaire 6,

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

note: @ schematics / angular est le schéma par défaut pour l'interface de ligne de commande angulaire

Answer 5

Intégration du préprocesseur CSS pour Angular CLI: 6.0.3

Lorsque vous générez un nouveau projet, vous pouvez également définir l’extension souhaitée pour les fichiers de style:

 ng new sassy-project --style=sass
 

Ou définissez le style par défaut sur un projet existant:

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

Documentation CLI angulaire pour tous les préprocesseurs CSS principaux