forked from PatrickJS/angular-webpack-starter
-
Notifications
You must be signed in to change notification settings - Fork 0
How to include SCSS in components
Frank Schumacher edited this page Aug 2, 2016
·
10 revisions
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({
styles: [ require('./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 'angular2/core';
@Component({
selector: 'app',
styles: [
require('./bootstrap.scss')
],
encapsulation: ViewEncapsulation.None,
template: ``
})
class App {}enjoy — AngularClass
Learn AngularJS, Angular 2, and Modern Web Development from the best. Looking for corporate Angular training, want to host us, or Angular consulting? patrick@angularclass.com
