Webpack Unable loader für SASS/SCSS

Question

ich die Fehlermeldung von dem, zu finden: unter

ERROR in ./src/assets/css/site.scss 
Module parse failed: C:\_Code\vscode\angular2-webpack-starter\src\assets\css\site.scss Unexpected character '@' (1:0) 
You may need an appropriate loader to handle this file type. 
| @import "_variables.scss"; 
| @import "_helpers.scss"; 
| html { 
@ ./src/app/app.component.ts 5:0-34 
@ ./src/app/app.module.ts 


module: { 
     loaders: [ 
     { 
      test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, 
      loader: "url?limit=10000&minetype=application/font-woff" 
     }, { 
      test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, 
      loader: "url?limit=10000&minetype=application/font-woff" 
     }, { 
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
      loader: "url?limit=10000&minetype=application/octet-stream" 
     }, { 
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
      loader: "file" 
     }, { 
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
      loader: "url?limit=10000&minetype=image/svg+xml" 
     },{ 
      test: /\.sass$/, 
      loaders: ["style", "css", "sass"] 
     } 
     ,{ 
      test: /\.scss$/, 
      loaders: ["style", "css", "sass"] 
     }], 
     rules:[...] 
     //Other random code from webpack starter kit 

}; 

Der Code funktioniert richtig

//Works  
require("!style-loader!css-loader!sass-loader!../assets/css/site.scss"); 
//Doesn't work 
require('../assets/css/site.scss'); 

bereits versucht, die folgenden Konfigurationsoptionen

{test: /\.scss$/, 
loaders: ["style-loader", "css-loader", "sass-loader"]} 

loaders: ["style", "css", "sass"] 
loader: '!style-loader!css-loader!sass-loader!' 
loader: 'style-loader!css-loader!sass-loader' 

Ich möchte von der Webpack-Konfiguration laden, scheint aber nicht zu funktionieren. Das Projekt ist praktisch der gesamte Angular 2 Webpack Starter.

Die richtigen Pakete sind alle als Abhängigkeiten installiert und ich habe die Tutorials und jede Lösung gelesen, die ich bei Google finden kann.

Answer 1

Dies ist, was ich verwende und es funktioniert:

 { 
      test: /\.scss$/, 
      use: ['to-string-loader', 'css-loader', 'sass-loader'] 
     }, 

und installieren

"style-loader 
"to-string-loader 
"sass-loader 
"node-sass 
"css-loader