Skip to content

How to include SCSS in components

Kuisong Tong edited this page Mar 21, 2016 · 10 revisions

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

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

Then in your component:

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

if you want global css support then on the top level component remove encapsulation and include the scss

import {ViewEncapsulation} from 'angular2/core';

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

Clone this wiki locally