Can't get SASS to work.

[FranciZ]

I can't get the most basic sass setup to work. I'm adding just the styleUrls to a component and the necessary loaders to webpack.common.js. Any help would be appreciated. It compiles as expected and runs using nodemon but the styles are not applied.

home-view.component.ts

import { Component, OnInit } from '@angular/core';
import { TransferHttp } from '../../modules/transfer-http/transfer-http';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'home-view',
  template: `<h3>{{subs | async}}</h3>`,
  styleUrls: ['./home-view.component.scss']
})
export class HomeView implements OnInit {
  public subs: Observable<string>;

  constructor( private http: TransferHttp ) {
  }

  ngOnInit() {
    this.subs = this.http.get('http://localhost:8000/data').map(data => {
      return `${data.greeting} ${data.name}`;
    });
  }
}

home-view.component.scss

h3 {
  color: #ff0000 !important;
}

webpack.common.js

const { root }      = require('./helpers');
const nodeExternals = require('webpack-node-externals');

/**
 * This is a common webpack config which is the base for all builds
 */
module.exports = {
  devtool : 'source-map',
  target  : 'node', // in order to ignore built-in modules like path, fs, etc.
  resolve : {
    extensions : ['.ts', '.js']
  },
  output  : {
    path : root('dist')
  },
  module  : {
    rules : [
      { test : /\.ts$/, loader : '@ngtools/webpack' },
      { test : /\.css$/, loader : 'raw-loader' },
      { test : /\.html$/, loader : 'raw-loader' },
      {
        test : /\.scss$/,
        use  : ['to-string-loader'].concat([{
          loader : "isomorphic-style-loader"
        }, {
          loader : "css-loader"
        }, {
          loader : "sass-loader"
        }])
      }
    ]
  },
  plugins : []
};

[FranciZ]

Never mind. Changed the loader in webpack.common.js as follows. It now works.

const { root }      = require('./helpers');
const nodeExternals = require('webpack-node-externals');

/**
 * This is a common webpack config which is the base for all builds
 */
module.exports = {
  devtool : 'source-map',
  target  : 'node', // in order to ignore built-in modules like path, fs, etc.
  resolve : {
    extensions : ['.ts', '.js']
  },
  output  : {
    path : root('dist')
  },
  module  : {
    rules : [
      { test : /\.ts$/, loader : '@ngtools/webpack' },
      { test : /\.css$/, loader : 'raw-loader' },
      { test : /\.html$/, loader : 'raw-loader' },
      { test: /\.scss$/, loaders: ['raw-loader', 'sass-loader?sourceMap'] },
    ]
  },
  plugins : []
};