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

Question

我使用的是最新版本的webpack和提取文本webpack插件。我正在努力按照指示导出Sass或更少。我一整天都在阅读有关这方面的问题和答案，但仍然没有找到任何有效的方法。我不明白我错过了什么。是否无法传入选项以设置sass加载程序的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加载程序设置includePath。

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,
})
],
}