Ich kann includePaths nicht festlegen, wenn ich ExtractTextPlugin und sass-loader verwende

Question

Ich benutze die neueste Version von webpack und extract-text-webpack-plugin. Ich versuche, die Anweisungen zu Export Sass or LESS zu folgen. Ich habe den ganzen Tag Fragen und Antworten gelesen und immer noch nichts gefunden, was funktioniert. Ich verstehe nicht, was ich vermisse. Ist es nicht möglich, Optionen zum Setzen von includePaths für den Sass-Loader zu übergeben? Dies ist meine aktuelle Versuch 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, 
    }) 
    ], 
} 

Beim Bau, erhalte ich folgende Fehlermeldung:

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

An dieser Stelle habe ich versucht, und bereit, alles 10 verschiedene Möglichkeiten, und ich kann Mach es nicht zur Arbeit. Ich bin sehr verwirrt darüber, ob das ein Fehler ist oder nicht, oder ob ich etwas falsch mache. Kann jemand helfen? Ich möchte nur die IncludePaths für Sass-Loader setzen.

Answer 1

Das funktioniert, ich habe keine Ahnung warum. Haben Sie eine Antwort auf 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, 
    }) 
    ], 
}