Jak korzystać z SASS dla komponentów w stylu Angular 2?

Question

W kątowa 2, gdy definiujemy komponent możemy określić styleUrls własności do dekoratora, który wskazuje na zbiór arkuszy stylów, które należy stosować do części:

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

Teraz co zrobić, jeśli chcę napisać te style z SASS?

Wiem, że będę musiał użyć Gulp lub Grunt, aby przenieść arkusze stylów SCSS na zwykły CSS. Ale to sprawia, że ​​jestem zdezorientowany, w jaki sposób poprawnie wskażemy Angularowi odpowiednie arkusze stylów.

Jak mogę zorganizować ten przepływ pracy przy użyciu SASS z Gulp/Grunt razem z Angular 2? Jak używać SASS do pisania stylów komponentów Angular 2?

Answer 1

Można użyć .scss w składniku jak to-

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

Zobacz, czy to pomaga.

Answer 2

Po wykonaniu tej czynności pod numerem wiki otrzymałem numer Error: Uncaught (in promise): Expected 'styles' to be an array of strings, który rozwiązałem, używając tego answer.

końcowy roztwór jest tutaj:

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: (część)

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

Answer 3

Używam go w ten sposób:

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

wiersza poleceń wewnątrz folderu projektu, gdzie istniejące package.json jest: npm zainstalować węzeł-Sass Sass-ładowarka raw-ładowarka flagą --save-dev

W webpack.common.js, szukać „zasad :”i dodać ten przedmiot do końca tablicy reguł (nie zapomnij dodać przecinek na końcu poprzedniego obiektu):

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

Następnie w części:

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