How to use SASS/SCSS in angular application

Question

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: $hea         


        

Answer 1

Instead of using styleUrls use styles and convert the file to a string.

styles: [require('./header.component.scss').toString()]

For your webpack config I think you have to many loaders. I believe you should be able to just have

'raw-loader!sass-loader' 

My current config is:

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loader: 'raw-loader!postcss-loader!sass-loader'
},