How to use SASS in angular2 application

[VishalGulati]

I am trying to build a color theme functionality in angular2 application using sass. My header.component.scss file is:

    $head-color: #f11;
    h1{
        color: $head-color;
    }

My header.component.ts file is:

import {Component} from '@angular/core';
import { Router } from '@angular/router';
import { Http, Response, Headers } from '@angular/http';

@Component({
    selector: 'sass-header',
    styleUrls: ['./app/header/header.component.scss'],
    template: `
    <h1>TESTING SASS</h1>`
})

export class SassComponent {

}

I have created a file webpack.common.js in root directory and added the following in it:

const webpack = require('webpack');
module.exports = {
  module: {
    loaders: [
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        loaders: ['raw-loader', 'sass-loader']
      }
    ]
  }
};

My header is being displayed in default black color. However if i change the scss file to following then its displayed in red color.

h1{
    color: #f11;
}

So basically I am not able to assign dynamic value to variables. Anyone having some idea about this pls share. TIA

[VishalGulati]

this is open @katallaxie why did you close this buddy?

[evanjmg]

+1

[shlomiassaf]

@VishalGulati this is a support issue, we have Gitter for that.

Your code is not good, don't require, don't toString() the result use a loader.

See #1407

[Mangesh-P]

👍