0

私はwebpackとextract-text-webpack-pluginの最新バージョンを使用しています。私は指示をExport Sass or LESSに従おうとしています。私はこの一日中、質問と回答を読んできましたが、それでも何かを見つけられませんでした。私は何が欠けているのか分かりません。 sass-loaderにincludePathsを設定するオプションを渡すことはできませんか?建物、私は次のエラーを取得する場合ExtractTextPluginとSass-Loaderを使用しているときにincludePathsを設定できません

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種類の方法を、私はできるこれがwebpack.config.jsで私の現在の試みでありますそれを働かせないでください。私はこれが何らかのバグであるかどうか、あるいは私が間違って何かをしているのかどうか、非常に混乱しています。誰も助けることができますか?私はsass-loaderのincludePathsを設定したいだけです。

答えて

0

これは機能していますが、私はその理由を知りません。

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の上の答えを得ました
関連する問題