Question

我正在尝试在我的React + Webpack项目上运行SASS编译并继续遇到此错误：

custom_file_frame.on('select', function() {
    var attachment = custom_file_frame.state().get('selection').first().toJSON();

    /*  The Loop here  */

    $.each(attachment.sizes, function( name, attribs ) {
        console.log( name );
        $.each( attribs, function( attrib, value ) {
            console.log( "\t" + attrib + " ==> " + value);
        });
    });


});

遵循本教程中的指南：Link

这是我的webpack.config.js

有什么建议吗？

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

Answer 1

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

或者您不在ExtractTextPlugin加载器中使用.scss（这不会将它们提取到开发中的css文件中）：

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

Answer 2

所以我通过安装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"),
 },

Answer 3

由于参数格式不正确，我发生错误 - 参考这个 - ＆gt; 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 }) ]

提取文本插件'加载器使用没有相应的插件' - React，Sass，Webpack

3 个答案: