提取文本插件「加載器沒有相應的插件」 - 反應，薩斯的WebPack

我試圖讓SASS編譯我的陣營+的WebPack項目運行，並繼續運行到這個錯誤：提取文本插件「加載器沒有相應的插件」 - 反應，薩斯的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 }), 
    ], 
};

來源

2017-02-21 Filth

當你的NODE_ENV不production，不包含任何插件。

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

所以當debug是真實的，你必須

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') 
}

來源

2017-02-21 13:54:58

@Micahel Jungo - 這已修復它，但是，我的sass沒有編譯到main.css表單中？ – Filth

沒有'ExtractTextPlugin'它不會創建一個css文件，但它在你的JS包中。所以如果你仍然希望它被提取出來，你也需要在開發中使用這個插件。 –

對不起隊友我有點困惑...似乎這是圍繞調試狀態。刪除它會更好嗎？我不確定我的webpack.config文件應該如何運行，並將sass編譯爲單個.css工作表？ – Filth

所以我通過安裝style-loader，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"), 
},

來源

2017-02-21 13:48:42

我的代碼更新到您的建議，並沒有鎖定黯然:-( – Filth

只是爲了確認，您使用的WebPack 1或2？你也得到同樣的錯誤？ –

Wepback 1.12.9 - 也許更新可能是爲了... – Filth

錯誤我，因爲參數格式不正確的 - 請參閱本 - > https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/207

我的代碼看起來像這樣 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 }) ]

來源

2017-06-12 12:59:16

提取文本插件「加載器沒有相應的插件」 - 反應，薩斯的WebPack

回答

相關問題