Javascript 网页包未读取@符号-意外字符'@'；(4:0)

为什么我会收到这个错误？我还将引导文件导入到主custom.scss文件中。不确定这是否会产生任何问题

我在尝试在中使用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');

---

我认为您需要将加载程序规则移动到

模块中

：

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'

      }
    ]
  }
};

如果不起作用，您可以尝试使用

指定装载机：

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

成功了！！语法起作用了。除了无法读取@符号外，我还遇到了加载所有引导包含到css中的图像文件的问题（即woff、woff2、eot、ttf、svg）。我找到了一个解决图像问题的教程（）。使用您提供的新语法并加载图像的URL加载器，我能够解决这两个问题。非常感谢。