title: Webpack 4 Module parse failed: Unexpected character '@' (1:0)
body: <p>I get this error when i try to run <code>npm run dev</code> to compile my scss to css. I know that issue is related to <code>@import</code></p>
  
  <p><strong>ERROR in ./src/scss/main.scss
  Module parse failed: Unexpected character '@' (1:0)
  You may need an appropriate loader to handle this file type.
  | @import "header";
   @ ./src/index.js 3:0-27</strong></p>
  
  <p><strong>src/index.js</strong>
  <code>import "./scss/main.scss";</code></p>
  
  <p><strong>src/scss/main.sccs</strong></p>
  
  <pre><code>@import "header";
  </code></pre>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>`
  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const WebpackMd5Hash = require('webpack-md5-hash');
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  module.exports = {
      entry: { main: './src/index.js' },
      output: {
          path: path.resolve(__dirname, 'dist'),
          filename: '[name].[chunkhash].js'
      },
      module: {
          rules: [{
                  test: /\.js$/,
                  exclude: /node_modules/,
                  use: {
                      loader: "babel-loader"
                  }
              },
              {
                  test: /\.scss$/,
                  include: [
                      path.resolve(__dirname, 'src', 'sass')
                  ],
                  use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
              }
          ]
      },
      plugins: [
          new CleanWebpackPlugin('dist', {}),
          new MiniCssExtractPlugin({
              filename: 'style.[contenthash].css',
          }),
  
  
    new HtmlWebpackPlugin({
          inject: false,
          hash: true,
          template: './src/index.html',
          filename: 'index.html'
      }),
      new WebpackMd5Hash()
    ]
    };`
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
      "name": "post",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
          "build": "webpack --mode production",
          "dev": "webpack --mode development"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
          "autoprefixer": "^8.2.0",
          "babel-core": "^6.26.0",
          "babel-loader": "^7.1.4",
          "babel-preset-env": "^1.6.1",
          "clean-webpack-plugin": "^0.1.19",
          "css-loader": "^0.28.11",
          "html-webpack-plugin": "^3.2.0",
          "mini-css-extract-plugin": "^0.4.0",
          "node-sass": "^4.8.3",
          "postcss-loader": "^2.1.3",
          "sass-loader": "^6.0.7",
          "style-loader": "^0.20.3",
          "webpack": "^4.4.1",
          "webpack-cli": "^2.0.13",
          "webpack-md5-hash": "0.0.6"
      }
  }
  </code></pre>