如何將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 {}