Webpackエラー：このファイルタイプを処理するには、適切なローダーが必要な場合があります。 | @charset "UTF-8";

Question

私はWebPACKの2.2.0で.scssファイルを処理しようとしていますが、代わりに取得することが私のindex.htmlファイルにstyleタグに注入され、私はExtractTextPluginと.cssファイルにそれを抽出するために望んでいました。

// webpack.config.js 

let path = require('path'); 
let ExtractTextPlugin = require('extract-text-webpack-plugin'); 
let extractCSS = new ExtractTextPlugin('[name].css'); 

module.exports = { 
    context: path.resolve(__dirname, './src'), 
    entry: './index.js', 
    output: { 
     path: path.resolve(__dirname, 'dist'), 
     filename: 'bundle.js', 
     publicPath: 'dist/' 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.js$/, 
       use: 'babel-loader', 
      }, 
      { 
       test: /\.(sass|scss)$/, 
       use: [ 

        /////////////////////////////////////// 
        // THIS WONT WORK AND CAUSES THE ERROR 
        /////////////////////////////////////// 

        extractCSS.extract({ 
         fallbackLoader: 'style-loader', 
         loader: ['css-loader', 'sass-loader'] 
        }), 

        ///////////// 
        // THIS WORKS 
        ///////////// 

        // 'style-loader', 'css-loader', 'sass-loader' 
       ] 
      }, 
      { 
       test: /\.(eot|svg|ttf|woff|woff2)$/, 
       loader: 'file-loader?name=[path][name].[ext]' 
      } 
     ] 
    }, 
    plugins: [ 
     extractCSS 
    ] 
} 

すべてのヘルプは高く評価されています

次は私のwebpack.config.jsファイルです。ありがとう。

Answer 1

これは現在ETPにあるバグです。私はあなたの問題を解決する "ローダー"への私の切り替えの使用を信じています。

https://github.com/webpack/extract-text-webpack-plugin/issues/342#issuecomment-273914852