提取文本插件“加载器没有相应的插件” - 反应，萨斯的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

回答

相关问题