Làm thế nào để sử dụng SASS cho các thành phần phong cách trong Angular 2?

Question

Trong góc 2 khi chúng ta định nghĩa một thành phần chúng ta có thể chỉ định một tài sản cho trang trí mà chỉ vào một tập hợp các stylesheets styleUrls được áp dụng cho các thành phần:

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

Bây giờ, những gì nếu tôi muốn viết những phong cách với SASS?

Tôi biết tôi sẽ cần sử dụng Gulp hoặc Grunt để chuyển đổi các bản định kiểu SCSS thành CSS thuần túy. Nhưng điều này làm cho tôi bối rối về cách chúng tôi sẽ chính xác điểm góc để các stylesheets chính xác.

Tôi có thể tổ chức quy trình làm việc này bằng cách sử dụng SASS với Gulp/Grunt cùng với Angular 2 như thế nào? Làm thế nào để sử dụng SASS để viết các thành phần Angular 2?

Answer 1

Bạn có thể sử dụng .scss trong Component như this-

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

Xem nếu điều này giúp.

Answer 2

Sau khi làm theo điều này wiki, tôi nhận được một số Error: Uncaught (in promise): Expected 'styles' to be an array of strings mà tôi đã giải quyết bằng cách sử dụng answer này.

giải pháp cuối cùng là ở đây:

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: (một phần của nó)

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

Answer 3

Tôi đang sử dụng nó theo cách này:

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

dòng lệnh bên trong thư mục dự án nơi package.json hiện tại của bạn là: NPM cài đặt nút-sass sass-loader liệu-loader --save-dev

Trong webpack.common.js, tìm kiếm cho "quy tắc :" và thêm đối tượng này đến cuối mảng quy tắc (đừng quên để thêm một dấu phẩy vào cuối của đối tượng trước đó):

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

Sau đó, trong thành phần của bạn:

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