Angular-cli du CSS au SCSS


135

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'(…)

1
Cela ne fonctionnera que pour les fichiers que vous générez à partir de ce moment, je ne pense pas que cela corrigera ceux que vous avez déjà. Si vous git diffvoyez ce que cela a changé.
jonrsharpe

Mais je n'ai pas encore de fichiers. Je veux juste changer.
Jamie

comment n'avez-vous pas encore de fichiers? Si vous créez un nouveau projet, pourquoi le configurez-vous de cette façon?
jonrsharpe

Je commence juste par angular2. J'essaye de tout comprendre.
Jamie

1
Si vous créez un nouveau projet, procédez ng new whatever --style=scss comme indiqué dans la documentation . Ne suivez pas les instructions pour configurer un projet existant si ce n'est pas ce que vous faites!
jonrsharpe

Réponses:


267

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 )

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

  2. Pointez la CLI pour trouver styles.scss

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

  1. 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

6
EDIT: j'avais juste besoin de rafraîchir le constructeur en temps réel. Cela fonctionne correctement
Cristian Traìna

1
@ angular / cli 1.7.3: changer defaults.styleExt de cssà scssin .angular-cli.jsoncréera automatiquement des fichiers scss pour chaque nouveau composant généré dans le futur.
SimonHawesome

4
ng set defaults.styleExt scss pour les projets existants
smedasn


22
@chovy pour la dernière version angular cli, dans mon cas (6.0.7), utilisez cette commande pour les projets existants: ng config schematics.@schematics/angular:component.styleext scss comme indiqué par @ hamilton.lima
Farhan

52

À 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"
  }
}

Je n'ai schematicspas au niveau racine mais imbriqué dans mon projet dans angular.json. Dois-je ignorer cela et ajouter ceci au niveau racine à la place?
mcheah

1
@mcheah, oui, c'est comme ça que le mien est également configuré, et cela fonctionne.
Eric Soyke

J'ai laissé le mien imbriqué dans le projet et il semble que cela fonctionne bien aussi, tout comme un FYI pour quiconque a la même question.
mcheah

Après la mise à jour vers les dernières versions de ng6, mon schematicsest maintenant également imbriqué.
Jose Orihuela

Cela ne semble rien changer pour moi. Ne traite toujours pas les règles scss dans les fichiers .css.
chovy

34

Ouvrez le fichier angular.json

1. changer de

"schematics": {}

à

"schematics": {
           "@schematics/angular:component": {
                   "styleext": "scss"       
             }  
  }
  1. 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


4
L'étape 1 peut être effectuée à partir de la CLI: ng config schematics.@schematics/angular:component.styleext scss comme spécifié dans la documentation officielle: github.com/angular/angular-cli/wiki/stories-css-preprocessors
Marian07

13

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


11

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


1
Invalid JSON character: "s" at 0:0.
chovy

À partir de CLI angulaire 6.0.8 ng config(comme ci - dessus) est la meilleure méthode , mais vous avez encore besoin de renommer les *.cssfichiers à *.scsset remplacer les références dans angular.jsonla style.cssavec style.scsset mettre à jour toutes les références de fichiers composant dans la styleUrlspropriété des nouveaux noms. ... alors ça marche très bien!
gkl

8

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


6

Utilisez la commande:

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

3

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

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

3

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


Brillant, cherchait ça. Je vous remercie!
Ruan Petersen

2

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 .


1

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

ne fonctionne pas pour moi et j'essaye de le faire sur 10
Kross
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.