web-dev-qa-db-fra.com

Comment ajouter la compilation Sass dans Angular CLI 6: angular.json?

Je viens de créer un nouveau projet Angular à l'aide du nouveau Angular CLI 6.0, mais je dois ajouter la compilation Sass à mon projet. Je sais que vous pouvez définir un indicateur lorsque vous créez un projet, mais mon projet est déjà créé et le travail est terminé.

Le nouveau fichier de configuration généré avec la nouvelle CLI Angular s'appelle désormais angular.json plutôt que angular-cli.json. Le schéma du fichier est également différent, avec de nouvelles propriétés.

Dans l'ancien angular-cli.json il y a une section où vous pouvez définir le stylExt comme suit,

"defaults": {
    "styleExt": "scss"
}

mais je ne sais pas exactement où mettre ceci, car après les propriétés "test" et "lint", donne une erreur de peluche de:

Matches multiple schemas when only one must validate.

et le bâtiment produit:

Schema validation failed with the following errors: Data path "['defaults']" should NOT have additional properties(styleExt).

En regardant documentation de la CLI Je ne vois rien qui indiquerait où mettre "styleExt".

J'ai vu d'autres réponses indiquant: ng set defaults.styleExt scss qui jette get/set have been deprecated in favor of the config command..

J'ai essayé ng config set defaults.styleExt scss et npm config set defaults.styleExt scss avec le premier jetant une erreur et le dernier n'ayant apparemment aucun effet sur le fichier, mais sans erreur.

angularnpmsassangular-cli
67
Esten

Faire exactement quoi Smokey Dawson a commenté ,

"projects": {
  "angular-app": {
    "root": "",
    "sourceRoot": "src",
    "projectType": "application",
    "prefix": "app",
    "schematics": {
      "@schematics/angular:component": {
        "styleext": "scss"
      }
    },
    "architect": {...}
  }
}

Ce qui précède est le résultat. Ainsi, dans votre application, sous la touche schematics, ajoutez une clé @schematics/angular:component avec la touche styleext définie sur scss.

Ceci devrait être appliqué à votre fichier angular.json dans le répertoire racine de votre projet.

108
Dico

Dans Angular 6, c'est plus simple que cela. La compilation est gérée automatiquement! Comment ça? Pour utiliser scss au niveau des composants, vous devez nommer le fichier avec l’extension scss (idem pour moins, styl ). Et dans votre composant.ts , vous modifiez également le style correspondant en scss .

Voici une capture d'écran de la doc: enter image description here

Et pour utiliser Scss à une échelle globale (src/styles.css), vous devez alors changer styles.css en styles.scss (la même chose pour moins, styl, etc.). Ensuite, vous allez sur angular.json et modifiez l'ancien style.css avec la nouvelle valeur styles.scss. Comme indiqué dans l'image ci-dessous:

enter image description here

Voici le lien pour le doc de la première partie pour ceux qui veulent explorer eux-mêmes: https://angular.io/guide/component-styles#non-css-style-files

Maintenant, qu'en est-il de la configuration, ng-cli donc lors de la génération d'un nouveau composant, l'extension sera par défaut scss? Utilisez la commande ng config comme suit :

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

Cela mettra à jour angular.json avec:

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

Quel est l'équivalent de l'ancien angular-cli.json

    defaults: {
        "styleext": "scss"
    }

Cela concerne un projet déjà démarré mais non défini par défaut sur scss. Si vous créez un nouveau projet, utilisez l'option --style pour le spécifier comme suit:

ng new my-project --style=scss

Et vous n'aurez pas à utiliser la commande precedent qui est une commande de configuration nous permettant de mettre à jour le champ spécifié dans le fichier angular.json (car il sera déjà défini).

53
Mohamed Allal