Webpack 未读取 @ 符号 - 意外字符“@”(4:0)

Question

为什么我会收到此错误消息？我还将 bootstrap 文件导入到主 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');

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' },
        ]
      }
    ]
  }
};

Webpack 未读取 @ 符号 - 意外字符“@”(4:0)

Webpack not reading @ symbol - Unexpected character '@' (4:0)

javascript

webpack

webpack-2