forked from PatrickJS/angular-webpack-starter
-
Notifications
You must be signed in to change notification settings - Fork 0
How to include SCSS in components
trik edited this page Aug 19, 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({
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 {}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
