title: Webpack 4 - Module parse failed: Unexpected character '@'
body: <p>I recently upgraded from Webpack 3 to 4. It's now throwing an error:</p>
  
  <blockquote>
    <p>Module parse failed: Unexpected character '@' You may need an
    appropriate loader to handle this file type. | @import
    './scss/variables.scss'; |  | * {  @ ./src/index.js 1:0-22</p>
  </blockquote>
  
  <p>In my styles.scss file, I am doing the following:</p>
  
  <pre><code>@import 'scss/variables.scss';
  
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  
  body {
      font-family: Arial, Helvetica, sans-serif;
  }
  </code></pre>
  
  <p>In my index.js file, I am only doing the following:</p>
  
  <pre><code>import './style.scss';
  </code></pre>
  
  <p>In my webpack.dev.js, all I changed was an addition of mode: 'development':</p>
  
  <pre><code>const StyleLintPlugin = require('stylelint-webpack-plugin');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const Dotenv = require('dotenv-webpack');
  
  module.exports = {
      mode: 'development',
      entry: './src/index.js',
      output: {
          filename: 'public/bundle.js'
      },
      module: {
          rules: [
              {
                  test: /\.js$/,
                  exclude: /node_modules/,
                  loader: ['babel-loader', 'eslint-loader']
              },
              {
                  test: /\.scss$/,
                  loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
              }
          ]
      },
      plugins: [
          new StyleLintPlugin({
              configFile: '.stylelintrc',
              context: 'src',
              files: '**/*.scss',
              failOnError: false,
              quiet: false,
              syntax: 'scss'
          }),
          new ExtractTextPlugin('public/style.css'),
          new Dotenv()
      ]
  };
  </code></pre>
  
  <p>I don't know what change from Webpack 3 to 4 has caused this error.</p>
  
  <p>The issue I'm having is very similar to the issue posted here: <a href="https://stackoverflow.com/questions/50477167/">Webpack 4 Module parse failed: Unexpected character &#39;@&#39; (1:0)</a></p>
  
  <p>I have been through all related stackoverflow questions and none of them helped.</p>
  
  <p>Here are the relevant dependencies in my package.json:</p>
  
  <pre><code>"babel-loader": "^7.1.4",
  "css-loader": "^0.28.11",
  "eslint-loader": "^1.9.0",
  "extract-text-webpack-plugin": "^4.0.0-beta.0",
  "node-sass": "^4.9.0",
  "sass-loader": "^6.0.7",
  "style-loader": "^0.20.3",
  "stylelint-webpack-plugin": "^0.10.5",
  "uglifyjs-webpack-plugin": "^1.2.5",
  "webpack": "^4.8.3",
  "webpack-cli": "^2.1.4"
  </code></pre>
  
  <p>Here are the relevant  scripts in my package.json file, for reference in the comments:</p>
  
  <pre><code>"scripts": {
      "watch": "./node_modules/.bin/webpack --mode development --watch --progress",
      "build": "./node_modules/.bin/webpack --mode production"
  },
  </code></pre>