title: Why am I not being able to compile SASS with Webpack?
body: <p>I have the following modules in my Webpack config:</p>
  
  <pre><code>module: {
      preLoaders: [
        {
          test: /\.vue$/,
          loader: 'eslint',
          include: projectRoot,
          exclude: /node_modules/
        },
        {
          test: /\.js$/,
          loader: 'eslint',
          include: projectRoot,
          exclude: /node_modules/
        }
      ],
      loaders: [
        {
          test: /\.vue$/,
          loader: 'vue'
        },
        {
          test: /\.js$/,
          loader: 'babel',
          include: projectRoot,
          exclude: /node_modules/
        },
        {
          test: /\.json$/,
          loader: 'json'
        },
        {
          test: /\.html$/,
          loader: 'vue-html'
        },
        {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          loader: 'url',
          query: {
            limit: 10000,
            name: utils.assetsPath('img/[name].[hash:7].[ext]')
          }
        },
        {
          test: /\.scss$/,
          loaders: ['style', 'css', 'sass']
        },
        {
          test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
          loader: 'url',
          query: {
            limit: 10000,
            name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
          }
        }
      ]
    },
  </code></pre>
  
  <p>You can see that I am using sass-loader, and for *.scss files I am defining this pipeline: <code>['style', 'css', 'sass']</code>.</p>
  
  <p>Then I have my scss file:</p>
  
  <pre><code>html {
    height: 100%;
  }
  
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  
  (...)
  </code></pre>
  
  <p>Finally I have my HTML page (in a VUE file from vue.js) which imports that scss file:</p>
  
  <pre><code>&lt;script&gt;
  
  require('./styles/main.scss')
  
  (...)
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>But somehow I get this error when launching the project:</strong></p>
  
  <pre><code>ERROR in ./~/css-loader!./~/sass-loader!./~/style-loader!./~/css-loader!./~/sass-loader!./src/styles/main.scss
  Module build failed:
  html {
  ^
        Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
        in /Users/td/uprank/src/styles/main.scss (line 1, column 1)
   @ ./src/styles/main.scss 4:14-247 13:2-17:4 14:20-253
  </code></pre>
  
  <p>Why is it getting the pipeline wrong? (It appears webpack is trying to process <code>['css', 'sass', 'style', 'css', 'sass']</code> instead of just <code>['style', 'css', 'sass']</code> as configured in modules.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>Thanks!</p>
  
  <p><strong>EDIT:</strong> Link to the full example project: <a href="https://dl.dropboxusercontent.com/u/1066659/dummy.zip">https://dl.dropboxusercontent.com/u/1066659/dummy.zip</a></p>