抽出プラグイン「ローダーは、対応するプラグインなしで使用される」テキスト - 反応して、サス、WebPACKの

Question

私はSASSのコンパイルが私の+ WebPACKのプロジェクトを反応させ、このエラーに実行し続ける上で実行して取得しようとしている：

Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin 

このチュートリアルのガイドラインに従っ：ここLink

は私のwebpack.config.js

任意の提案ですか？

const debug = process.env.NODE_ENV !== "production"; 
const webpack = require('webpack'); 
const path = require('path'); 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = { 
    context: path.join(__dirname, "src"), 
    devtool: debug ? "inline-sourcemap" : null, 
    entry: "./js/client.js", 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015', 'stage-0'], 
      plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'], 
     } 
     }, 
     { 
      test: /\.scss$/, 
      loader: ExtractTextPlugin.extract('css!sass') 
     } 
    ] 
    }, 
    output: { 
    path: __dirname + "/src/", 
    filename: "client.min.js" 
    }, 
    plugins: debug ? [] : [ 
    new ExtractTextPlugin('dist/styles/main.css', { 
     allChunks: true 
    }), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 
    ], 
}; 

Answer 1

あなたNODE_ENVがproductionない場合、あなたはどのプラグインが含まれていません。 debugがtrueの場合

plugins: debug ? [] : [ 
    new ExtractTextPlugin('dist/styles/main.css', { 
    allChunks: true 
    }), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 
], 

だから、あなたは

plugins: [] 

があるでしょう。しかし、あなたはまだ.scssローダーでそれを使用しています。それを解決するために

（あなたがUglifyJsPluginのような生産のプラグインを持っていないので）、あなたは同様にこれらのプラグインに追加することができます：

plugins: debug 
    ? [ 
     new ExtractTextPlugin("dist/styles/main.css", { 
     allChunks: true 
     }) 
    ] 
    : [ 
     new ExtractTextPlugin("dist/styles/main.css", { 
     allChunks: true 
     }), 
     new webpack.optimize.DedupePlugin(), 
     new webpack.optimize.OccurenceOrderPlugin(), 
     new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }) 
    ] 

それとも、あなたの.scssローダーでExtractTextPluginを使用していません（これは、開発中のCSSファイルに抽出しません）：

{ 
    test: /\.scss$/, 
    loader: debug ? 'css!sass' : ExtractTextPlugin.extract('css!sass') 
} 

Answer 2

だから、スタイルローダー、css-loader、およびsass-loaderをインストールすることでこれを解決しました。

npm install style-loader css-loader sass-loader --save-dev 

次に、このように使用しました。

{ 
    test: /\.scss$/, 
    loader: ExtractTextPlugin.extract("style-loader","css-loader!sass-loader"), 
}, 

Answer 3

エラーがあるため、パラメータの間違ったフォーマットの私のために発生した - これを参照してください - > https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/207

私のコードは、ちょうどあなたがWebPACKの1または2を使用している、確認するために私はあなたの提案にコードを更新し、この module: { rules: [ { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }) }] }, plugins: [ new ExtractTextPlugin({ filename: 'css/[name].css', disable: false, allChunks: true }) ]