How to use SASS for components style in Angular 2?

Question

In Angular 2 when we define a component we can specify a styleUrls property to the decorator which points to a set of stylesheets to be applied to the component:

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

Now, what if I want to write these styles with SASS?

I know I would need to use Gulp or Grunt to transpile the SCSS stylesheets to plain CSS. But this makes me confused on how we would correctly point Angular to the correct stylesheets.

How could I organize this workflow of using SASS with Gulp/Grunt together with Angular 2? How to use SASS to write the Angular 2 components styles?

If by chance you are using the angular-cli all you need to do is rename the file name and leave all other references alone and the angular-cli will take care of the rest — Jarod Moser
– Jarod Moser, Commented Jul 11, 2016 at 18:44

Community · Accepted Answer · 2017-05-23 12:25:42Z

3

After following this wiki, I got some Error: Uncaught (in promise): Expected 'styles' to be an array of strings which I resolved using this answer.

Final solution is here:

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'
    ]
  },

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Jul 13, 2016 at 10:26

MaximeBernard

1,1101 gold badge20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vishal Over a year ago

could you pls share webpack.conf.js

Vishal Over a year ago

when i use :styles: [ String(require('./home.component.scss')) ] then it starts looking for home.component.scss.js file. hence give 404 not found. Why does it looks for scss.js file?

Sanket · Accepted Answer · 2016-07-11 18:44:34Z

0

You can use .scss in Component like this-

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

See if this helps.

answered Jul 11, 2016 at 18:44

Sanket

20.2k10 gold badges74 silver badges84 bronze badges

Comments

Angel M. · Accepted Answer · 2016-12-11 09:13:49Z

0

I'm using it this way:

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 {}

answered Dec 11, 2016 at 9:13

Angel M.

2,7522 gold badges34 silver badges44 bronze badges

Comments

Akintade Ajibade · Accepted Answer · 2017-03-23 09:08:16Z

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 "rules:" and add this object to the end of the rules 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'],
})

Collectives™ on Stack Overflow

How to use SASS for components style in Angular 2?

4 Answers 4

2 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Linked

Related