How to use SASS for component style in Angular 2?

Question

In Angular 2, when we define a component, we can specify the styleUrls property for a decorator that points to the set of style sheets that will be applied to the component:

 @Component({ selector: 'the-app' templateUrl: 'templateFile.html', styleUrls: ['componentStyles.css', 'moreComponentStyles.css'] }) export class TheAppComponent {} 

Now, if I want to write these styles using SASS?

I know that I will need to use Gulp or Grunt to translate SCSS stylesheets into plain CSS. But it bothers me how we correctly point Angular to the correct stylesheets.

How can I organize this process of using SASS with Gulp / Grunt along with Angular 2? How to use SASS to write Angular 2 styles?

Answer 1

After doing the wiki, I got a few Error: Uncaught (in promise): Expected 'styles' to be an array of strings , which I decided to use with the answer .

Final decision:

home.component.ts:

 import { Component } from '@angular/core'; @Component({ selector: 'home', template: require('./home.component.html'), styles: [ String(require('./home.component.scss')) ] }) export class HomeComponent { } 

webpack.conf.js : (part of it)

  { test: /\.(css|scss)$/, loaders: [ 'style', 'css', 'sass', 'postcss' ] }, 

Answer 2

You can use .scss in Component like this -

 styles: [require('normalize.css'), require('./app.scss')], 

See if that helps.

Answer 3

I use it as follows:

 import {Component} from "@angular/core"; // for webpack require('./footer.scss'); @Component({ selector: 'footer', templateUrl: 'app/footer/footer.html', styleUrls: ['app/footer/footer.scss'], }) export class FooterComponent {} 

Answer 4

The command line is inside the project folder, where is your existing package.json: npm install node-sass sass-loader raw-loader --save-dev

In webpack.common.js, find "rules:" and add this object to the end of the rules array (remember 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'], })