Can't set includePaths when using ExtractTextPlugin and sass-loader

Question

I'm using the newest version of webpack and extract-text-webpack-plugin. I am trying to following the instructions to Export Sass or LESS. I've been reading questions and answers around this all day and still have not found anything that works. I don't understand what I'm missing. Is it not possible to pass in options to set includePaths for the sass-loader? This is my current attempt in webpack.config.js:

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');

module.exports = {
  entry: ['./src/index.js', './src/scss/main.scss'],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: './dist'
  },
  module: {
    rules: [
      { // scss loader for webpack
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              use: 'css-loader'
            },
            {
              use: 'sass-loader',
              options: {
                includePaths: [
                  path.resolve(__dirname, 'src/scss'),
                  path.resolve(__dirname, "node_modules/foundation-sites/scss")
                ]
              }
            }
          ]
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({ // define where to save the file
      filename: 'styles.css',
      allChunks: true,
    })
  ],
}

When building, I get the following error:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[0].use should be one of these:
   non-empty string | function | object { loader?, options?, query? } | function | [non-empty string | function | object { loader?, options?, query? }]
   Details:
    * configuration.module.rules[0].use should be a string.
    * configuration.module.rules[0].use should be an instance of function.
    * configuration.module.rules[0].use should be an object.
    * configuration.module.rules[0].use should be one of these:
      non-empty string | function | object { loader?, options?, query? }
    * configuration.module.rules[0].use should be an instance of function.
    * configuration.module.rules[0].use[2] should be a string.
    * configuration.module.rules[0].use[2] should be an instance of function.
    * configuration.module.rules[0].use[2] has an unknown property 'use'. These properties are valid:
      object { loader?, options?, query? }
    * configuration.module.rules[0].use[2] should be one of these:
      non-empty string | function | object { loader?, options?, query? }
    * configuration.module.rules[0].use[3] should be a string.
    * configuration.module.rules[0].use[3] should be an instance of function.
    * configuration.module.rules[0].use[3] has an unknown property 'use'. These properties are valid:
      object { loader?, options?, query? }
    * configuration.module.rules[0].use[3] should be one of these:
      non-empty string | function | object { loader?, options?, query? }

At this point I have tried and ready everything 10 different ways and I can't get it to work. I am very confused as to whether or not this is a bug of some kind, or if I am doing something incorrectly. Can anyone help? I just want to set the includePaths for sass-loader.

Answer 1

This works, I have no idea why. Got an answer on github:

https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/657#issuecomment-340889167

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');

module.exports = {
  entry: ['./src/index.js', './src/scss/main.scss'],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: './dist'
  },
  module: {
    rules: [
      { // scss loader for webpack
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader'
            },
            {
              loader: 'sass-loader',
              options: {
                includePaths: [
                  path.resolve(__dirname, 'src/scss'),
                  path.resolve(__dirname, "node_modules/foundation-sites/scss")
                ]
              }
            }
          ]
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({ // define where to save the file
      filename: 'styles.css',
      allChunks: true,
    })
  ],
}