Webpack不讀@符號 - 意想不到的字符'@'（4：0）

Question

爲什麼我收到此錯誤？我還將引導文件導入到主custom.scss文件中。不確定這是否會產生任何問題？

嘗試使用SCSS裝載機 的WebPack時，我收到此錯誤：

 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' 

     } 
    ] 
    } 
}; 

如果沒有按沒有工作，您可以嘗試use指定裝載機：

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