angular - Angular で sass-loader が機能しないのはなぜですか?

Question

sass を処理するためのルールがあります。

{
    test: /\.(scss|sass)$/,
    use: [
        { loader: 'raw-loader'},
        { loader: 'sass-loader', options: {data: sassConfiguration} }
    ],
}

タイプスクリプトローダー

{
            test: /\.ts$/,
            loaders: [
                'awesome-typescript-loader?configFileName=tsconfig.webpack.json',
                'angular2-template-loader',
                'angular2-router-loader'
            ]
        }

Webpack はアセンブリを正常にアセンブルします

Executing post-build scripts
Hash: 331769d88b67e8dcb050
Version: webpack 2.4.1
Time: 10908ms
                                           Asset       Size  Chunks                    Chunk Names
                fonts/roboto/Roboto-Medium.woff2    50.2 kB          [emitted]         
             js/main.min.331769d88b67e8dcb050.js     438 kB       0  [emitted]  [big]  main
        js/polyfills.min.331769d88b67e8dcb050.js     207 kB       1  [emitted]         polyfills
                                      index.html  199 bytes          [emitted]         
                       css/style.1bn0nmtons8.css     120 kB          [emitted]         
                                      login.html  969 bytes          [emitted]         

app.component.ts

@Component({
    selector: "my-app",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.scss"],
    ]
})
export class AppComponent {}

ただし、ブラウザーに入ると、タグ内のコンポーネントに対して、コンパイルされていない sass が規定されています。

sassConfiguration (長い行):

$theme: 'default'; 

// classic color
$black: #000;
$white: #fff;
$brown: #566e60;
$blue: #285473;

// Yellow
$cyanYellow: #f7a800;
$paleCyanYellow: #fab800;
$darkYellow: #fec200;
$lightYellow: #fee27e;
$classicYellow: #fdbf2b;
$baseLightYellow: #fef7cb;

// Green
$lightGreen: #b8d986;
$cyanGreen: #88ae00;

..

@function getMainColor(){
  @return baseGetColor($mainColor);
}

..

何をするか教えてください？