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