Wie benutzt man SASS für Komponentenstil in Angular 2?

Question

In Angular 2, wenn wir eine Komponente definieren wir eine styleUrls Eigenschaft auf den Dekorateur angeben kann, die auf eine Reihe von Stylesheets verweist auf auf das Bauteil aufgebracht werden:

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

Nun, was ist, wenn ich diese Stile schreiben wollen mit SASS?

Ich weiß, ich müsste Gulp oder Grunt verwenden, um die SCSS-Stylesheets in einfache CSS zu übertragen. Aber das verwirrt mich darüber, wie wir Angular korrekt auf die richtigen Stylesheets zeigen.

Wie könnte ich diesen Workflow der Verwendung von SASS mit Gulp/Grunt zusammen mit Angular 2 organisieren? Wie benutzt man SASS, um die Angular 2-Komponentenstile zu schreiben?

Answer 1

Sie können .scss in Komponenten verwenden wie this-

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

sehen, ob das hilft.

Answer 2

Nach dieser wiki, habe ich einige Error: Uncaught (in promise): Expected 'styles' to be an array of strings, die ich mit dieser answer gelöst.

Endlösung ist hier:

home.component.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: (ein Teil davon)

{ 
    test: /\.(css|scss)$/, 
    loaders: [ 
     'style', 
     'css', 
     'sass', 
     'postcss' 
    ] 
    }, 

Answer 3

Ich benutze es so:

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 {} 

Answer 4

Befehlszeile innerhalb Projektordner, in dem Sie Ihre vorhandenen package.json ist: npm Knoten-Sass installieren Sass-loader Roh-loader --save-dev

In webpack.common.js, für „Regeln suchen :“und fügen Sie diese Aufgabe bis zum Ende des Arrays Regeln (vergessen Sie nicht ein Komma an das Ende des vorherigen Objekts hinzugefügt werden):

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

Dann in Ihrer Komponente:

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