title: VueJS + WebpackSimple not compiling SASS
body: <p>I have bare new installation of VueJs by webpack simple, trying to set up SASS to CSS. Docs are saying that it is ready for development but webpack only works on SCSS not on SASS. Can some one share some kwnolegde how to use <code>lang="sass"</code>?</p>
  
  <p>ALso i followed tutorial on <a href="https://vue-loader.vuejs.org/guide/pre-processors.html#sass-vs-scss" rel="nofollow noreferrer">https://vue-loader.vuejs.org/guide/pre-processors.html#sass-vs-scss</a> but with no result</p>
  
  <p><strong>Webpack file</strong></p>
  
  <pre><code>    var path = require('path')
  var webpack = require('webpack')
  
  module.exports = {
    entry: './src/main.js',
    output: {
      path: path.resolve(__dirname, './dist'),
      publicPath: '/dist/',
      filename: 'build.js'
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ['vue-style-loader', 'css-loader']
        },
        {
          test: /\.scss$/,
          use: ['vue-style-loader', 'css-loader', 'sass-loader']
        },
        {
          test: /\.sass$/,
          use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax']
        },
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            loaders: {
              // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
              // the "scss" and "sass" values for the lang attribute to the right configs here.
              // other preprocessors should work out of the box, no loader config like this necessary.
              scss: ['vue-style-loader', 'css-loader', 'sass-loader'],
              sass: [
                'vue-style-loader',
                'css-loader',
                'sass-loader?indentedSyntax'
              ]
            }
            // other vue-loader options go here
          }
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/
        },
        {
          test: /\.(png|jpg|gif|svg)$/,
          loader: 'file-loader',
          options: {
            name: '[name].[ext]?[hash]'
          }
        }
      ]
    },
    resolve: {
      alias: {
        vue$: 'vue/dist/vue.esm.js'
      },
      extensions: ['*', '.js', '.vue', '.json']
    },
    devServer: {
      historyApiFallback: true,
      noInfo: true,
      overlay: true
    },
    performance: {
      hints: false
    },
    devtool: '#eval-source-map'
  }
  
  if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: '"production"'
        }
      }),
      new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        compress: {
          warnings: false
        }
      }),
      new webpack.LoaderOptionsPlugin({
        minimize: true
      })
    ])
  }
  </code></pre>
  
  <p><strong>Error</strong></p>
  
  <p>Failed to compile.</p>
  
  <p>./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?type=styles&amp;index=0!./src/App.vue
  Module not found: Error: Can't resolve '../img/Group3.png' in 'C:\Users\Damian\Desktop\Vue\karuzela\src'
   @ ./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?type=styles&amp;index=0!./src/App.vue 7:1073-1101
   @ ./node_modules/vue-style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?type=styles&amp;index=0!./src/App.vue
   @ ./src/App.vue
   @ ./src/main.js
   @ multi (webpack)-dev-server/client?<a href="http://localhost:8080" rel="nofollow noreferrer">http://localhost:8080</a> webpack/hot/dev-server ./src/main.js</p>
  
  <p><strong>Tryinh to wokr on this syntax</strong></p>
  
  <pre><code>.carousel {
    background: url(../img/Group3.png);
    min-height: 350px;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 0 0 100px 0;
    border-radius: 4px;
    **&amp;__row** {
      max-width: 1300px;
      margin: 0 auto;
      margin-top: -100px;
      text-align: left;
      .slick-track {
        padding: 0 0 70px 0;
      }}
  </code></pre>