Je suis nouveau sur 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 la meilleure façon de gérer SASS dans un nouveau projet Angular. J'ai essayé d'utiliser le ember-cli-sassdépôt pour voir s'il fonctionnerait, car un certain nombre de composants principaux de l'Angular-CLI sont exécutés à partir de modules Ember-CLI.

Cela n'a pas fonctionné, mais je ne sais pas si je viens de mal configurer quelque chose.

De plus, quelle est la meilleure façon d'organiser les styles dans un nouveau projet Angular? Ce serait bien d'avoir le fichier sass dans le même dossier que le composant.

Angular CLI version 9 (utilisé pour créer des projets Angular 9) reprend désormais styledes schémas au lieu de styleext. Utilisez la commande comme ceci:
ng config schematics.@schematics/angular:component.style scss
et le angular.json résultant ressemblera à ceci

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

Autres solutions et explications possibles:

Pour créer un nouveau projet avec une CLI angulaire avec prise en charge SASS, essayez ceci:

ng new My_New_Project --style=scss 

Vous pouvez également utiliser --style=sass& si vous ne connaissez pas la différence, lisez ce court article facile et si vous ne savez toujours pas, continuez scsset continuez à apprendre.

Si vous avez un projet angulaire 5, utilisez cette commande pour mettre à jour la configuration de votre projet.

ng set defaults.styleExt scss

Pour les dernières versions

Pour Angular 6 pour définir 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"
    }
}

Mise à jour pour Angular 6+

1. De nouveaux projets

   Lors de la génération d'un nouveau projet avec Angular CLI, spécifiez le pré-processeur css comme

   • Utiliser la syntaxe SCSS

     ng new sassy-project --style=scss
     

   • Utiliser 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

   • Utiliser la syntaxe SCSS

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

   • Utiliser 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ù styleextpeut être soit scssou sassselon le choix.

Réponse originale (pour angulaire <6)

De nouveaux projets

Pour les nouveaux projets, nous pouvons définir les options --style=sassou --style=scssselon la saveur souhaitée SASS / SCSS

• Utiliser la syntaxe SASS

  ng new project --style=sass 
  

• Utiliser 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-clipour compiler des fichiers sass avec node-sass, j'ai dû 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
  

pour définir le style par défaut Ext à sass

(ou)

changer styleExtà sassou scsspour la syntaxe désirée .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"
        ],
  

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 d'Angular2App contient des options sassCompiler, lessCompiler, stylusCompiler et compassCompiler qui sont transmises directement à leurs préprocesseurs CSS respectifs.

Vois ici

• https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

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

Pour éviter de passer --style scsschaque fois que vous générez un projet, vous souhaiterez peut-être ajuster votre configuration par défaut d'angular-cli globalement, avec la commande suivante:

ng set --global defaults.styleExt scss

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

ng new some_project_name --style=scss

Comme Mertcan l'a dit, la meilleure façon 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 pour 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 consulter ici leur documentation:

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

J'ai remarqué un problème très gênant lors du passage aux fichiers scss !!! Il faut passer d'un simple: styleUrls: ['app.component.scss']à styleUrls: ['./app.component.scss'](ajouter ./) dansapp.component.ts

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

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

Ensuite, la CLI angulaire créera pour vous tout nouveau composant avec scss ...

Notez que l'utilisation scssne fonctionne pas dans le navigateur comme vous le savez probablement .. nous avons donc besoin de quelque chose pour le compiler css, pour cette raison nous pouvons l'utiliser node-sass, l'installer comme ci-dessous:

npm install node-sass --save-dev

et vous devriez être prêt à partir!

Si vous utilisez webpack, lisez la suite ici:

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

Dans webpack.common.js, recherchez «règles:» et ajoutez cet objet à la fin du tableau de règles (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 du composant de niveau supérieur (probablement app.component.ts) et incluez le SCSS:

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

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

du démarreur angulaire ici .

ng set --global defaults.styleExt=scssest obsolète depuis ng6. Vous obtiendrez ce message:

get / set est déconseillé au profit de la commande config

Tu devrais utiliser:

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

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

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

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

Crète un nouveau projet avec SCSS

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

Convertir un projet existant (CLI moins que v6)

ng set defaults.styleExt scss

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

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

1. renommer tous les fichiers CSS en SCSS et mettre à 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" }

Pour Angular 9.0 et supérieur, mettez à jour l' "schematics":{}objet dans le fichier angular.json comme ceci:

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

Les éléments suivants doivent fonctionner dans un projet CLI 6 angulaire. C'est-à-dire si vous obtenez:

get / set est déconseillé au profit 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 le nom de votre projet par défaut, utilisez:

ng config defaultProject

Cependant: si vous avez migré votre projet de <6 vers 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

Une édition manuelle de angular.jsonsera donc 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 être un schéma trop complexe. ¯_ (ツ) _ / ¯

Vous devrez maintenant changer tous vos fichiers css / less pour qu'ils soient scss et mettre à jour toutes les références dans les composants, etc., mais vous devriez être prêt à partir.

Le 3/10/2019, Anguar a abandonné le soutien de sass. Peu importe l'option à --stylelaquelle vous avez passé lors de l'exécution ng new, vous obtenez toujours des .scssfichiers générés. C'est dommage que le soutien de Sass ait été abandonné sans aucune explication.

Définissez-le comme valeur par défaut globale

ng set defaults.styleExt=scss --global

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

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

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

Lors de la génération d'un nouveau projet, vous pouvez également définir l'extension que vous souhaitez 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 CLI angulaire

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

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

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

ng set defaults.styleExt scss

mais j'ai compris

get / set est déconseillé au profit de la commande config.

• CLI angulaire: 6.0.7
• Noeud: 8.9.0
• Système d'exploitation: linux x64
• Angulaire: 6.0.3

J'ai donc supprimé mon projet (car je commençais à peine et je n'avais pas de code dans mon projet) et j'en ai créé un nouveau avec sass initialement défini

nouvelle application my-sassy -style = scss

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

Étape 1. Installer le package bulma à l'aide de 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 tout.

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 + ANGULAIRE 6