为什么sass-loader在Angular中不起作用？

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);
}

..

告诉我该怎么做？

Answer 1

在webpack配置中更改配置如下：

 {
   test: /\.ts$/,
    use: [
       {
         loader: 'awesome-typescript-loader'
       },
         {
           loader: 'angular2-template-loader'
          }
         ]
    },
    {
        test: /\.scss$/,
        use: [
                     {
                            loader: 'raw-loader'
                        },
                       {
                            loader: 'sass-loader'
                        }
        ],
    }