CODEWITHSUNDEEP
javascriptwebpackwebpack-2
Adam Donatelli
Adam Donatelli

Reputation: 103

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

Why am I receiving this error? I also have bootstrap files being imported into the main custom.scss file. Not sure if this is creating any issues?

I'm receiving this error when attempting to use the scss loader in 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');

Upvotes: 1

Views: 707

Answers (1)

Hedge
Hedge

Reputation: 1231

I believe you need to move the loader rule into 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'

      }
    ]
  }
};

If that doesn't work, you can try the use to specify the loaders:

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

Upvotes: 1

Related Questions