のWebPACK - 私はのエラーメッセージを取得SASS/SCSS

Question

ためのローダーを見つけることができません：

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 

}; 

は、以下のコードが正しく

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

の作品はすでに、次の設定オプションに

{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' 

を試してみました

webpack設定からロードしたいが、動作していないようです。このプロジェクトは実質的にAngular 2ウェブパックスターターの全体です。

正しいパッケージがすべて依存関係としてインストールされています。私はチュートリアルやGoogleで見つけられるすべてのソリューションを読みました。

Answer 1

これは私が使用しているものですし、それが動作します：

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

と

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