如何为 webpack-angular2 初学者工具包添加 Sass 支持？

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中搜索"loaders:"并将这个对象添加到loaders数组的末尾（不要忘记在前一个对象的末尾添加一个逗号）：

{
  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 {}

如何为 webpack-angular2 初学者工具包添加 Sass 支持？

How to add Sass support to webpack-angular2 starter kit?

angular

typescript

sass

webpack

webpack-style-loader