使用 ExtractTextPlugin 和 sass-loader 时无法设置 includePaths

Question

我正在使用最新版本的 webpack 和 extract-text-webpack-plugin。我正在尝试按照Export Sass or LESS 的说明进行操作。我整天都在阅读有关此问题的问题和答案，但仍然没有找到任何有效的方法。我不明白我错过了什么。是否无法传递选项来为 sass-loader 设置 includePaths？这是我目前在 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,
    })
  ],
}

在构建时，我收到以下错误：

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? }

此时，我已经尝试并准备好了 10 种不同的方法，但我无法让它发挥作用。我很困惑这是否是某种错误，或者我做错了什么。任何人都可以帮忙吗？我只想为 sass-loader 设置 includePaths。

Answer 1

这行得通，我不知道为什么。在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,
    })
  ],
}