web-dev-qa-db-fra.com

Utilisation de Sass dans angular 2

J'essaie d'installer Sass dans mon Angular 2 projet. Si je comprends bien, il existe essentiellement deux façons de créer un projet angular 2

1) Utiliser angular-cli _ ( https://github.com/angular/angular-cli )

J'ai fait référence à la réponse mentionnée dans https://stackoverflow.com/a/41541042/2868352 & J'ai pu utiliser avec succès les fichiers scss dans angular 2 project , tout a bien fonctionné, mais je n’ai pas pu localiser le fichier css généré à partir du fichier scss dans le dossier du projet. Quelqu'un pourrait-il expliquer pourquoi aucun fichier css n’a été généré, mais toujours travaillé?

2) Utilisation de quickstart seed _ ( https://angular.io/guide/quickstart )

Je ne pouvais obtenir aucune information sur la manière de configurer sass dans un projet quickstart. Est-ce que quelqu'un a une idée sur l'utilisation de sass dans le projet de démarrage rapide fourni par angular?

Merci d'avance!

cssangularsass
25
Abhishek V

[Vérifier la partie modifiée à la fin de cette réponse au cas où vous utiliseriez angular cli]

Expliquant comment utiliser sass dans la 'graine de démarrage rapide' ( https://angular.io/guide/quickstart ) (- https://angular.io/guide/setup#download )

Veuillez suivre ces étapes simples:

Étape 1: Configurez la graine de démarrage rapide

Utilisez les commandes ci-dessous pour configurer

npm install
npm start

vous verrez 'Hello Angular' sur le navigateur.

Étape 2: Installez node-sass et sass-loader

Utilisez les commandes mentionnées ci-dessous pour installer

npm i node-sass -S
npm i sass-loader -S

Vous pouvez maintenant voir ces deux éléments ajoutés dans votre "dépendance" à l'intérieur du fichier "package.json".

Étape 3: Créez 2 dossiers pour le code Sass et le code Css

Créez deux dossiers avec un nom quelconque dans le dossier "quickstart-master". Dans ce cas, par exemple: "sass_folder" et "css_folder". Créez maintenant un fichier de démonstration 'demo.sass' et placez-le dans 'sass_folder'. Vous pouvez mettre un simple code sass dans ce fichier .sass. Il ressemblera à ceci:

  $font-stack:    Helvetica, sans-serif
  $primary-color: #000

  body
    font: 100% $font-stack
    color: $primary-color

Étape 4: Modifiez le fichier 'package.json'

Ajoutez des scripts pour générer et observer le code Sass présent dans "sass_folder". Après la compilation, le code CSS résultant doit être stocké dans "css_folder". Une fois les modifications apportées, le fichier "Scripts" du fichier 'package.json' devrait ressembler à ceci:

"scripts": {
     "build": "tsc -p src/",
     "build:watch": "tsc -p src/ -w",
     "build:e2e": "tsc -p e2e/",
     "serve": "lite-server -c=bs-config.json",
     "serve:e2e": "lite-server -c=bs-config.e2e.json",
     "prestart": "npm run build",
     "start": "concurrently \"npm run build:watch\" \"npm run serve\" \"npm run watch:sass\"",
     "pree2e": "npm run build:e2e",
     "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
     "preprotractor": "webdriver-manager update",
     "protractor": "protractor protractor.config.js",
     "pretest": "npm run build",
     "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
     "pretest:once": "npm run build",
     "test:once": "karma start karma.conf.js --single-run",
     "lint": "tslint ./src/**/*.ts -t verbose",
     "build:sass": "node-sass sass_folder/ -o css_folder",
     "watch:sass": "npm run build:sass && node-sass sass_folder/ -wo css_folder/"
  }

Jetez un coup d'œil à 'start', 'build: sass' et à 'watch: sass' uniquement.

Étape 5: Exécuter l'application

Maintenant, vous pouvez exécuter l'application en utilisant la commande ci-dessous:

npm start

Vous verrez le code CSS compilé dans "css_folder" avec le même nom de fichier 'demo.css'. Cela ressemblera à ceci (dans ce cas):

body {
  font: 100% Helvetica, sans-serif;
  color: #000; }

Maintenant, si vous apportez des modifications au fichier .sass, celles-ci seront reflétées de manière dynamique dans le fichier .css pendant que le script surveille le code.

Si cela indique une erreur, fermez le fichier .css lorsque vous apportez des modifications au fichier .sass.

Remarque: pour le code scss, vous pouvez suivre les mêmes étapes. Vous devez simplement mettre le fichier .scss dans "sass_folder" dans ce cas.

[édité] Si vous voulez utiliser Angular CLI:

Au moment de la création du nouveau Angular utilisation du projet sous les cmnds mentionnés:

Pour sass:

ng new Demo_Project --style=sass

Pour scss:

ng new Demo_Project --style=scss

Pour changer le style existant:

ng set defaults.styleExt scss

Après cela, vous pouvez utiliser Cli normalement.

42
AmanDeepSharma

Je peux t'expliquer le premier.

Si vous utilisez ng serverles fichiers compilés sont enregistrés dans un dossier caché de votre projet.

Si vous utilisez ng build, vous pouvez voir vos fichiers compilés dans le dossier/dist. Dans ce dossier, vous pouvez trouver vos styles généraux dans les styles de fichier. [Hashversion] .css, mais les styles de composants locaux sont inclus dans main. [Hashversion] .js de Webpack.

Angular-cli utilise webpack, et si vous voulez en savoir plus sur, voir Webpack Docs

[~ # ~] met à jour [~ # ~]

Dans le second cas, vous devez compiler manuellement sass. Dans le dossier de l'application, ne possédez pas app.component.ts qui sera compilé dans le même dossier que app.component.js par TypeScript Compiler. Donc, vous devez faire la même chose avec sass. Importez le fichier CSS dans le composant.

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
  stylesUrl: ['app/app.component.css']
})
export class AppComponent  { name = 'Angular'; }

Vous remarquerez que vous ne pouvez pas utiliser de chemin relatif car tout sera demandé à partir du répertoire racine.

Créé un app.component.sass et mettez vos styles à l'intérieur.

Puis exécutez le compilateur sass qui compile le app.component.sass à app.component.css

Exécutez le serveur et cela fonctionnera.

5
Serginho

Il y a deux scénarios principaux ici.

  1. Lors de la création d’un nouveau Angular CLI, utilisez la commande CLI

    ng new my-angular-app --style=scss

  2. Quand un projet CLI Angular a déjà été configuré, utilisez la commande CLI

    ng set default.styleExt scss

Dans le cas 2, vous devez convertir manuellement les fichiers existants .css. Vous pouvez aussi utiliser sass ou less au lieu de scss

Voyez l'article complet ici.

tilisation de SCSS/SASS/LESS dans Angular Projet CLI

1
Jayesh Panchal