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

구축 할 때, 나는 다음과 같은 오류 얻을 :이 내가 시도 포인트와 준비가 다 10 가지 방법에

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

을 내가 할 수있는 그것을 작동시키지 마십시오. 나는 이것이 어떤 종류의 버그인지 또는 내가 잘못한 일을하고 있는지에 대해 매우 혼란 스럽다. 누구든지 도와 줄 수 있습니까? 나는 sass-loader를위한 includePaths를 설정하기를 원한다.

Answer 1

이것은 작동합니다. 이유는 알 수 없습니다.

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

: GitHub의에 답을 얻었다