web-dev-qa-db-fra.com

Angular Options CLI SASS

Je suis nouveau dans Angular et je viens de la communauté Ember. Essayer d'utiliser la nouvelle Angular-CLI basée sur Ember-CLI.

J'ai besoin de connaître le meilleur moyen de gérer SASS dans un nouveau projet Angular. J'ai essayé d'utiliser le référentiel ember-cli-sass pour voir s'il pouvait continuer car un certain nombre de composants de base de Angular-CLI sont exécutés à partir de modules Ember-CLI.

Cela n'a pas fonctionné mais encore une fois pas sûr si je viens de mal configurer quelque chose.

En outre, quel est le meilleur moyen d’organiser les styles dans un nouveau projet Angular? Il serait bien d’avoir le fichier sass dans le même dossier que le composant.

angularsassangular-cli
309
JDillon522

Lorsque vous créez votre projet avec angular cli, essayez ceci:

ng new My_New_Project --style=sass

Cela génère tous vos composants avec des fichiers sass prédéfinis.

Si vous voulez la syntaxe scss, créez votre projet avec:

ng new My_New_Project --style=scss

Si vous modifiez votre style existant dans votre projet

ng set defaults.styleExt scss

Cli s'occupe du reste.

Pour les dernières versions

Pour que Angular 6 définisse un nouveau style sur un projet existant avec CLI:

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

Ou directement dans angular.json:

"schematics": {
      "@schematics/angular:component": {
      "styleext": "scss"
    }
}
518
Mertcan Diken

Mise à jour pour Angular 6+

  1. De nouveaux projets

    Lorsque génère un nouveau projet avec Angular CLI, spécifiez le pré-processeur css comme

    • tiliser la syntaxe SCSS

      _ng new sassy-project --style=scss
_

    • tilisez la syntaxe SASS

      _ng new sassy-project --style=sass
_

  2. Mise à jour du projet existant

    Définissez le style par défaut sur un projet existant en exécutant

    • tiliser la syntaxe SCSS

      _ng config schematics.@schematics/angular:component.styleext scss
_

    • tilisez la syntaxe SASS

      _ng config schematics.@schematics/angular:component.styleext sass
_

    La commande ci-dessus mettra à jour votre fichier d’espace de travail (angular.json) avec

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

    où styleext peut être soit scss ou sass selon le choix.



Réponse originale (pour Angular <6)

De nouveaux projets

Pour les nouveaux projets, nous pouvons définir les options _--style=sass_ ou _--style=scss_ en fonction de la saveur souhaitée SASS/SCSS.

  • tilisez la syntaxe SASS

    _ng new project --style=sass 
_

  • tiliser la syntaxe SCSS

    _ng new project --style=scss 
_

puis installez node-sass,

_npm install node-sass --save-dev
_

Mise à jour des projets existants

Pour faire angular-cli pour compiler des fichiers sass avec _node-sass_, je devais exécuter,

_npm install node-sass --save-dev 
_

qui installe _node-sass_. ensuite

  • pour la syntaxe SASS

    _ng set defaults.styleExt sass
_

  • pour la syntaxe SCSS

    _ng set defaults.styleExt scss
_

définir le styleExt par défaut sur sass

(ou)

remplacez styleExt par sass ou scss pour la syntaxe souhaitée dans _.angular-cli.json_,

  • pour la syntaxe SASS

    _"defaults": {
     "styleExt": "sass",
}
_

  • pour la syntaxe SCSS

    _"defaults": {
     "styleExt": "scss",
}
_
_ERROR in multi styles
Module not found: Error: Can't resolve '/home/user/projects/project/src/styles.css' in '/home/user/projects/project'
 @ multi styles 
_

qui a été corrigé en changeant les lignes de _.angular-cli.json_,

_"styles": [
        "styles.css"
      ],
_

soit,

  • pour la syntaxe SASS

    _"styles": [
        "styles.sass"
      ],
_

  • pour la syntaxe SCSS

    _"styles": [
        "styles.scss"
      ],
_
335
All Іѕ Vаиітy

Cité par les officiels github repo ici -

Pour en utiliser un, il suffit d'installer par exemple

npm install node-sass

et renommez les fichiers .css de votre projet en .scss ou .sass. Ils seront compilés automatiquement. L'argument options de Angular2App a les options sassCompiler, lessCompiler, stylusCompiler et compassCompiler qui sont directement transmises à leurs préprocesseurs CSS respectifs.

Vois ici

37
regnar

Dites à angular-cli de toujours utiliser scss par défaut

Pour éviter de passer --style scss à chaque fois que vous générez un projet, vous pouvez ajuster votre configuration par défaut d'angular-cli globalement, à l'aide de la commande suivante:

ng set --global defaults.styleExt scss


Veuillez noter que certaines versions de angular-cli contiennent un bogue lors de la lecture du drapeau global ci-dessus ( voir lien ). Si votre version contient ce bogue, générez votre projet avec:

ng new some_project_name --style=scss
26
Michael P. Bazos

Comme Mertcan l’a dit, le meilleur moyen d’utiliser scss est de créer le projet avec cette option:

ng new My_New_Project --style=scss

Angular-cli ajoute également une option permettant de modifier le préprocesseur css par défaut après la création du projet à l'aide de la commande:

ng set defaults.styleExt scss

Pour plus d'informations, vous pouvez regarder ici pour leur documentation:

https://github.com/angular/angular-cli

22
Jared Wadsworth

J'ai remarqué une situation très angoissante dans le passage aux fichiers scss !!! On DOIT passer d'un simple: styleUrls: ['app.component.scss'] à styleUrls: ['./app.component.scss'] (ajouter ./) dans app.component.ts

Ce que fait ng lorsque vous générez un nouveau projet, mais apparemment pas lorsque le projet par défaut est créé. Si vous voyez des erreurs de résolution lors de la génération de ng, recherchez ce problème. Cela ne m'a pris qu'environ 1 heure.

16
JoelParke

Le mieux pourrait être ng new myApp --style=scss

Alors CLI angulaire créera tout nouveau composant avec scss pour vous .. .

Notez que l'utilisation de scss ne fonctionnant pas dans le navigateur, comme vous le savez probablement, nous avons donc besoin de quelque chose pour le compiler en css, pour cette raison, nous pouvons utiliser node-sass, installez-le comme ci-dessous:

npm install node-sass --save-dev

et vous devriez être prêt à partir!

Si vous utilisez Webpack, lisez la suite:

Ligne de commande dans le dossier du projet où votre package.json existant est: npm install node-sass sass-loader raw-loader --save-dev

Dans webpack.common.js, recherchez "rules:" et ajoutez cet objet à la fin du tableau rules (n'oubliez pas d'ajouter une virgule à la fin de l'objet précédent):

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}

Puis dans votre composant:

@Component({
  styleUrls: ['./filename.scss'],
})

Si vous souhaitez une prise en charge CSS globale, supprimez l’encapsulation et incluez le SCSS dans le composant de niveau supérieur (probablement app.component.ts):

import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'app',
  styleUrls: ['./bootstrap.scss'],
  encapsulation: ViewEncapsulation.None,
  template: ``
})
class App {}

de Angular démarreur ici .

6
Alireza

ng set --global defaults.styleExt=scss est obsolète depuis ng6. Vous recevrez ce message:

get/set est déconseillé en faveur de la commande config

Tu devrais utiliser:

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

Si vous souhaitez cibler un projet spécifique (remplacez {projet} par le nom de votre projet):

ng config projects.{project}.schematics.@schematics/angular:component '{ styleext: "scss"}'
5
aloisdg

Angular-CLI est la méthode recommandée et constitue la norme dans la communauté Angular 2+.

Crete un nouveau projet avec SCSS

ng new My-New-Project --style=sass

Convertir un projet existant (CLI inférieur à v6)

ng set defaults.styleExt scss

(vous devez renommer tous les fichiers .css manuellement avec cette approche, n'oubliez pas de renommer vos fichiers composants)


Convertir un projet existant (CLI supérieur à v6)

  1. renommez tous les fichiers CSS en SCSS et mettez à jour les composants qui les référencent.
  2. ajoutez ce qui suit à la clé "schematics" de angular.json (généralement la ligne 11):

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

4
Edodso2

À compter du 3/10/2019, Anguar a abandonné le soutien de sass. Peu importe l'option que vous avez passée à --style lors de l'exécution de ng new, vous obtenez toujours les fichiers .scss générés. C'est dommage que le support sass ait été abandonné sans aucune explication.

2
Just a learner

Ce qui suit devrait fonctionner dans un projet angular CLI 6. Ie si vous obtenez:

get/set ont été déconseillés en faveur de la commande config.

npm install node-sass --save-dev

Ensuite (en vous assurant de changer le nom du projet)

ng config projects.YourPorjectName.schematics.@schematics/angular:component.styleext sass

Pour obtenir votre nom de projet par défaut, utilisez:

ng config defaultProject

Cependant: Si vous avez migré votre projet de <6 à angular 6, il y a de fortes chances que la configuration ne soit pas là. Dans ce cas, vous pourriez obtenir:

Caractère JSON non valide: "s" à 0: 0

Par conséquent, une édition manuelle de angular.json sera nécessaire.

Vous voudrez qu'il ressemble à ceci (en prenant note de la propriété styleex):

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

Cela me semble un schéma trop complexe. ¯_ (ツ) _/¯

Vous devez maintenant remplacer tous vos fichiers css/less par scss et mettre à jour toutes les références dans les composants, etc., mais vous devriez être prêt à partir.

2
Neil Watson

Définir comme Global Default

ng set defaults.styleExt=scss --global

1
Sajith Mantharath

Intégration du préprocesseur CSS Angular La CLI prend en charge tous les préprocesseurs CSS principaux:

Pour utiliser ces préprocesseurs, ajoutez simplement le fichier à styleUrls de votre composant:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app works!';
}

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

note: @ schematics/angular est le schéma par défaut pour la Angular CLI

Les chaînes de style ajoutées au tableau @ Component.styles doivent être écrites en CSS, car la CLI ne peut pas appliquer de préprocesseur aux styles en ligne.

Basé sur angular documentation https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

0
Victor Hugo Arango A.

Étape 1. Installez le paquet bulma en utilisant npm

npm install --save bulma

Étape 2. Ouvrez angular.json et mettez à jour le code suivant

...
 "styles": [
 "node_modules/bulma/css/bulma.css",
 "src/styles.scss"
 ],
...

C'est ça.

Pour exposer facilement les outils de Bulma, ajoutez stylePreprocessorOptions à angular.json.

...
 "styles": [
 "src/styles.scss",
 "node_modules/bulma/css/bulma.css"
  ],
 "stylePreprocessorOptions": {
 "includePaths": [
    "node_modules",
    "node_modules/bulma/sass/utilities"
 ]
},
...

BULMA + ANGULAR 6

0
BALA

J'ai essayé de mettre à jour mon projet pour utiliser le sass en utilisant cette commande

ng set defaults.styleExt scss

mais j'ai ce

get/set ont été déconseillés en faveur de la commande config.

  • CLI angulaire: 6.0.7
  • Node: 8.9.0
  • OS: Linux x64
  • Angulaire: 6.0.3

J'ai donc supprimé mon projet (car je venais juste de commencer et je n'avais pas de code dans mon projet) et en ai créé un nouveau avec sass initialement défini.

nouveau my-sassy-app --style = scss

Mais j'apprécierais que quelqu'un puisse partager un moyen de mettre à jour le projet existant car ce serait Nice.

0
Junaid