Webpackは@記号を読み取っていません - 予期しない文字 '@'（4：0）

Question

このエラーはなぜ発生しますか？私はまた、メインのcustom.scssファイルにインポートされているブートストラップファイルを持っています。問題が発生しているかどうかは不明です。

のWebPACKにSCSSローダーを使用しようとしたとき、私はこのエラーを受けています：

 Unexpected character '@' (4:0) 
     You may need an appropriate loader to handle this file type. 
     | 
     | 
     | @import "_bootstrap"; 
     | @import "spinner"; 
     | @import "navigations"; 
     @ ./js/app.js 5:0-30 



     Here is my webpack.config.js script: 

     var path = require('path'); 
     var webpack = require('webpack'); 

     module.exports = { 
      entry: './js/app.js', 
      output: { 
       path: __dirname, 
       filename: 'js/bundle.js' 
      }, 

      watch: true, 
      module: { 
       rules: [ 
        { 
         test: /\.(jpe?g|png|gif|svg)$/i, 
         //test: /\.(png|jpg)$/, 
         use: 'file-loader' 
        } 
       ], 
       loaders: [ 
        { 
        test: /.jsx?$/, 
        loader: 'babel-loader', 
        exclude: /node_modules/, 
        query: { 
        presets: ['es2015', 'react'] 
        } 
        }, 
        { 
        test: /.scss?$/, 
        loader: 'style-loader!css-loader!sass-loader' 

        } 

       ] 
      }, 
     }; 


     Here is my require script located in my app.js file: 

     require('../scss/custom.scss'); 

Answer 1

私はあなたがmoduleにローダルールを移動する必要があると考えている：

module.exports = { 
    entry: './js/app.js', 
    output: { 
    path: __dirname, 
    filename: 'js/bundle.js' 
    }, 

    watch: true, 
    module: { 
    rules: [ 
     { 
     test: /\.(jpe?g|png|gif|svg)$/i, 
     //test: /\.(png|jpg)$/, 
     use: 'file-loader' 
     }, 
     { 
     test: /\.jsx?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     }, 
     { 
     test: /\.scss?$/, 
     loader: 'style-loader!css-loader!sass-loader' 

     } 
    ] 
    } 
}; 

それはdoesnの場合あなたはローダーを指定するためにuseを試すことができます：

module.exports = { 
    module: { 
    rules: [ 
     { 
     test: /\.scss?$/, 
     use: [ 
      { loader: 'style-loader' }, 
      { loader: 'css-loader' }, 
      { loader: 'sass-loader' }, 
     ] 
     } 
    ] 
    } 
};