Comment utiliser SASS pour les composants de style Angulaire 2?

Angulaire 2 lorsque nous définissons un composant, nous pouvons spécifier une styleUrls propriété de le décorateur, qui désigne un ensemble de feuilles de style pour être appliqué à la pièce:

@Component({
    selector: 'the-app'
    templateUrl: 'templateFile.html',
    styleUrls: ['componentStyles.css', 'moreComponentStyles.css']
})
export class TheAppComponent {}

Maintenant, si je veux écrire ces styles avec SASS?

Je sais que j'aurais besoin d'utiliser Gulp ou Grunt à transpile le SCSS feuilles de style à la plaine de CSS. Mais ce qui me rend confus sur la façon dont nous allions correctement le point Angulaire correcte des feuilles de style.

Comment ai-je pu organiser ce flux de travail de l'utilisation de SASS avec Gulp/Grunt avec Angulaire 2? Comment utiliser SASS pour écrire l'angle de 2 composants styles?

Si par hasard vous êtes à l'aide de la angulaires-cli tout ce que vous devez faire est de renommer le nom de fichier et quitter toutes les autres références seul et l'angle-cli prendra soin du reste
J'ai trouvé comment faire ce travail. Viens de lire ma réponse ci-dessous 🙂

OriginalL'auteur user1620696 | 2016-07-11

  1. 3

    Après avoir suivi ce wiki, j'ai eu quelques Error: Uncaught (in promise): Expected 'styles' to be an array of strings qui je l'ai résolu en utilisant cette réponse.

    Solution finale est ici:

    la maison.composante.ts:

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

@Component({
  selector: 'home',
  template: require('./home.component.html'),
  styles: [ String(require('./home.component.scss')) ]
})

export class HomeComponent { }

    webpack.conf.js: (en partie) 

      {
    test: /\.(css|scss)$/,
    loaders: [
      'style',
      'css',
      'sass',
      'postcss'
    ]
  },
    pourriez-vous pls partager webpack.conf.js
    gist.github.com/Maximebpro/9457d3429d6848c5d669f0ada99a60f1
    lorsque j'utilise :styles: [ String(require('./la maison.composante.scss')) ] puis il commence à chercher home.component.scss.js fichier. donc donner 404 not found. Pourquoi est-il le cherche scss.js fichier?

    OriginalL'auteur MaximeBernard

  2. 0

    Vous pouvez utiliser .scss en Composant, ce

    styles: [require('normalize.css'), require('./app.scss')],

    Voir si cela aide.

    OriginalL'auteur Sanket

  3. 0

    Je l'utilise de cette façon:

    import {Component} from "@angular/core";

//for webpack
require('./footer.scss');

@Component({
     selector: 'footer',
     templateUrl: 'app/footer/footer.html',
    styleUrls: ['app/footer/footer.scss'],
})
export class FooterComponent {}

    OriginalL'auteur Angel M.

  4. 0

    Ligne de commande à l'intérieur du projet dossier où votre colis.json est: npm install nœud-sass sass-chargeur de raw-chargeur --save-dev

    Dans webpack.common.js, recherche pour "règles:" et ajouter l'objet à la fin de règles array (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 composante:

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

    OriginalL'auteur Akintade Ajibade