web-dev-qa-db-fra.com

Angular-cli de css à scss

J'ai lu le 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?

javascriptcssangularsassangular-cli
68
Jamie

Pour Angular 6 voir la Documentation officielle

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

Pour les projets existants

Dans un projet angular-cli existant qui a été configuré avec les styles css par défaut, vous devez effectuer certaines tâches:

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

Changer manuellement en .angular-cli.json (angulaire 5.x et plus ancien) ou angular.json (angulaire 6+) ou en cours d'exécution:

ng config defaults.styleExt=scss

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

  2. Pointez la CLI pour trouver styles.scss

Changer manuellement les extensions de fichier dans apps[0].styles dans angular.json

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

Modifiez la styleUrls dans vos composants pour qu'elle corresponde à vos nouveaux noms de fichier.

Pour les projets futurs

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

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 ultérieurement, exécutez la commande suivante:

ng config --global defaults.styleExt=scss
148
Chic

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

Changer manuellement dans .angular.json:

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
}
41
Jose Orihuela

Ouvrir angular.json file

1.change 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 fichiers .css et mettez à jour les fichiers Component.ts styleUrls à partir de .css to .scss

25
BALA

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

11
Franklin Pious

Intégration du préprocesseur CSS pour CLI angulaire: 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

10
Angel Roma

Sous ng6, vous devez utiliser cette commande, selon un post similaire:

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

Utilisez la commande:

ng config schematics.@schematics/angular:component.styleext scss
2
himanshu sharma

Pour les utilisateurs des 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 

1
tilo

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

Allez dans le dossier app src/app

  1. Ouvrez ce fichier: app.component.ts  

  2. Changez ce code styleUrls: ['./app.component.css'] en styleUrls: ['./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 cette modification pour tous les autres composants. (ex. maison, environ, contact, etc ...)

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

  1. Rechercher et remplacer le fichier css le changer en (scss) .

  2. Sauver et fermer.

Enfin, redémarrez votre ng serve -o. 

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

Assurez-vous de suivre les étapes décrites dans app/src de près.

0
Frank Thoeny