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