Angular 2'de bileşen stili için SASS nasıl kullanılır? Biz bileşeni tanımlarken biz stil kümesine işaret dekoratör bir <code>styleUrls</code> özelliği belirtebilirsiniz 2 Eğik olarak

Question

bileşene uygulanacak: Artık

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

, ben bu stilleri yazmak istiyorum ne olur SASS ile?

SCSS stil sayfalarını düz CSS'ye aktarmak için Gulp veya Grunt kullanmam gerekeceğini biliyorum. Ancak bu, Angular'ı doğru stil sayfalarına doğru şekilde nasıl göstereceğimiz konusunda kafamı karıştırdı.

SASS'i Gulp/Grunt ve Angular 2 ile birlikte kullanma iş akışını nasıl organize edebilirim? Angular 2 bileşenlerinin stillerini yazmak için SASS nasıl kullanılır?

Answer 1

Sen bu yardımcı olur bak bu-

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

gibi Bileşen .scss kullanabilirsiniz.

Answer 2

Bu wiki izledikten sonra, bu answer kullanarak çözdüğüm bazı Error: Uncaught (in promise): Expected 'styles' to be an array of strings var.

Nihai çözelti, burada:

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: (bunun bir parçası)

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

Answer 3

Bu şekilde kullanıyorum:

Mevcut package.json olan proje klasörünün içindeki

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

Komut satırı: npm yüklemek düğüm-küstahlık

webpack.common.js ise

, "kuralların için arama --save-dev küstahlık-yükleyici ham-yükleyici : sizin bileşende Sonra

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

:

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