Angular-cli du CSS au SCSS

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

ng set defaults.styleExt scss

Mais lorsque je fais cela et que je 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'(…)

Pour Angular 6, consultez la documentation officielle

Remarque: pour les @angular/cliversions antérieures à l' 6.0.0-beta.6utilisation ng setà la place de ng config.

Pour les projets existants

Dans un projet angular-cli existant qui a été configuré avec les cssstyles par défaut , vous devrez faire plusieurs choses:

1. Remplacez l'extension de style par défaut par scss

Changez manuellement dans .angular-cli.json(Angular 5.x et plus ancien) ou angular.json(Angular 6+) ou exécutez:

ng config defaults.styleExt=scss

si vous obtenez une erreur: Value cannot be found.utilisez la commande:

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

(* source: options CLI SASS angulaires )

2. Renommez vos .cssfichiers existants en .scss(c'est- à -dire styles.css et app / app.component.css)

3. Pointez la CLI pour trouver styles.scss

Modifiez manuellement les extensions de fichier dans apps[0].stylesdansangular.json

4. Pointez les composants pour trouver vos nouveaux fichiers de style

Modifiez le styleUrlsdans vos composants pour correspondre à vos nouveaux noms de fichiers

Pour les futurs projets

Comme @Serginho l'a mentionné, vous pouvez définir l'extension de style lors de l'exécution de la ng newcommande

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 à l'avenir, exécutez la commande suivante:

ng config --global defaults.styleExt=scss

À partir de ng6, cela peut être accompli avec le code suivant ajouté angular.jsonau niveau racine:

Changer manuellement en .angular.json:

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

Ouvrez le fichier angular.json

1. changer 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 .cssfichiers et mettez à jour les fichiers component.ts styleUrls de.css to .scss

Pour Angular 6,

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

Remarque: @ schematics / angular est le schéma par défaut de la CLI angulaire

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

Lors de la génération d'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 principaux préprocesseurs CSS

Pour les projets existants :

Dans le angular.jsondossier

1. En buildpartie et en testpartie, remplacez:

   "styles": ["src/styles.css"], par "styles": ["src/styles.scss"],

2. Remplacer:

   "schematics": {}, par "schematics": { "@schematics/angular:component": { "style": "scss" } },

L'utilisation de la ng config schematics.@schematics/angular:component.styleext scsscommande fonctionne mais ne place pas la configuration au même endroit.

Dans votre projet, renommez vos .cssfichiers en.scss

Pour un nouveau projet , cette commande fait tout le travail:

ng n project-name --style=scss

Pour la configuration globale

Les nouvelles versions ne semblent pas avoir de commande globale

Utilisez la commande:

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

En NG6 vous devez utiliser cette commande, selon un même poste :

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'

Pour les utilisateurs du extensions Nrwl qui rencontrent ce fil: toutes les commandes sont interceptées par Nx (par exemple, ng generate component myCompent) puis transmises à AngularCLI.

La commande pour faire fonctionner SCSS dans un espace de travail Nx:

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

Un changement de force brute peut être appliqué. Cela fonctionnera pour changer, mais c'est un processus plus long.

Accédez au dossier de l'application src / app

1. Ouvrez ce fichier: app.component.ts

2. Remplacez ce code styleUrls: ['./app.component.css']parstyleUrls: ['./app.component.scss']

3. Sauver et fermer.

Dans le même dossier src / app

1. Renommez l'extension du fichier app.component.css en (app.component.scss)

2. Suivez ce changement pour tous les autres composants. (ex. domicile, à propos, contact, etc ...)

Le fichier de configuration angular.json est le suivant. Il est situé à la racine du projet.

1. Recherchez et remplacez le css, changez-le en (scss) .

2. Sauver et fermer.

Enfin, redémarrez votre ng serve -o.

Si le compilateur se plaint de vous, reprenez les étapes.

Assurez-vous de suivre attentivement les étapes dans app / src .

Dans la dernière version d'Angular (v9), le code ci-dessous doit être ajouté angular.json

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

Peut être ajouté à l'aide de la commande suivante:

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