Sass-LoaderがAngularで動作しないのはなぜですか？

Question

は私が扱うSASSのルールがあります。

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

typescriptですローダーのWebPACKが正常にアセンブリを組み立てる

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

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が規定されている3210

、：

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' 
         } 
     ], 
    }