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中，搜索＆＃34;加载器：＆＃34;并将此对象添加到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支持？

1 个答案: