Как добавить поддержку Sass в webpack-angular2 стартовый комплект?

Question

Я использую webpack-angular2 стартовый комплект (https://github.com/AngularClass/angular2-webpack-starter)

Как я могу реализовать поддержку Sass?

Answer 1

После некоторых исследований я реализовал поддержку Sass.

Это мое решение:

Командная строка в папке проекта, где существующий package.json является:

npm install node-sass sass-loader raw-loader --save-dev 

В webpack.common.js, поиск «погрузчики:» и добавить этот объект до конца массива погрузчиков (не забудьте добавить запятую в конце предыдущего объекта):

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

Тогда в компоненте:

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

Если вы хотите глобальную поддержку CSS, то на компонент верхнего уровня (вероятно app.component.ts) удалить инкапсуляцию и включают SCSS:

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

@Component({ 
    selector: 'app', 
    styleUrls: ['./bootstrap.scss'], 
    encapsulation: ViewEncapsulation.None, 
    template: `` 
}) 
class App {}