title: Webpack throwing error on SCSS @import SCSS
body: <p>I'm trying to process multiple SCSS files into a single external CSS file in Webpack (3.6.0) except I'm encountering issues around the parsing of the @import statements.</p>
  <p>Entry index.js contains:</p>
  <pre><code>import './styles/main.scss';
  </code></pre>
  <p>Entry SCSS:</p>
  <pre><code>@import 'reset.scss';
  @import 'global.scss';
  @import 'fonts.scss';
  @import 'system.scss';
  </code></pre>
  <p>Current webpack:</p>
  <pre><code>const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  const CopyWebpackPlugin = require('copy-webpack-plugin');
  
  module.exports = {
      entry: {
          app: './src/index.js'
      },
      context: path.resolve(__dirname),
  
      output: {
          path: path.resolve(__dirname, 'public'),
          filename: 'bundle.js',
      },
  
      plugins: [
          new CleanWebpackPlugin(['app']),
          new HtmlWebpackPlugin({
              title: 'Minimum-Viable',
              filename: 'index.html',
              template: './public/index.html',
          }),
      ],
  
      module: {
          rules: [
              {
                  test: /\.js$/,
                  exclude: /node_modules/,
                  use: {
                      loader: 'babel-loader',
                      options: {
                          presets: [
                              'es2015',
                              'react',
                          ],
                          plugins: ['transform-class-properties'],
                      },
                  },
              },
              {
                  test: /\.scss$/,
                  include: [
                      path.resolve(__dirname, 'styles')
                  ],
                  use: [
                      {loader:'style-loader'},
                      {loader:'css-loader'},
                      {loader:'sass-loader'}
                  ]
              },
          ],
      },
      resolve: {
          extensions: ['.js','.scss']
      }
  };
  </code></pre>
  <p>The Error being thrown is:</p>
  <blockquote>
  <p>ERROR in ./src/styles/main.scss Module parse failed: Unexpected character '@' (1:0)</p>
  <p>You may need an appropriate loader to handle this file type. | @import 'reset.scss';</p>
  </blockquote>
  <p>Any pointers gratefully received.</p>