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

Question

I am using webpack-angular2 starter kit (https://github.com/AngularClass/angular2-webpack-starter)

How I can implement Sass support?

Answer 1

After some research I implemented Sass support.

This is my solution:

Command line inside project folder where your existing package.json is:

npm install node-sass sass-loader raw-loader --save-dev

In webpack.common.js, search for "loaders:" and add this object to the end of the loaders array (don't forget to add a comma to the end of the previous object):

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}

Then in your component:

@Component({
  styleUrls: ['./filename.scss'],
})

If you want global CSS support then on the top level component (likely app.component.ts) remove encapsulation and include the SCSS:

import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'app',
  styleUrls: ['./bootstrap.scss'],
  encapsulation: ViewEncapsulation.None,
  template: ``
})
class App {}