Razzle config with support for SASS (with source maps)

razzle.config.js

"use strict";

const autoprefixer = require("autoprefixer");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const Visualizer = require("webpack-visualizer-plugin");

module.exports = {
  modify: (baseConfig, { target, dev }, webpack) => {
    const appConfig = Object.assign({}, baseConfig);

    // Setup SCSS
    if (target === "web") {
      const cssLoader = {
        loader: "css-loader",
        options: {
          minimize: !dev,
          sourceMap: dev,
          importLoaders: 1
        }
      };

      const postCSSLoader = {
        loader: "postcss-loader",
        options: {
          ident: "postcss", // https://webpack.js.org/guides/migrating/#complex-options
          sourceMap: dev,
          plugins: () => [
            autoprefixer({
              browsers: [
                ">1%",
                "last 4 versions",
                "Firefox ESR",
                "not ie < 9" // React doesn't support IE8 anyway
              ]
            })
          ]
        }
      };

      const sassLoader = {
        loader: "sass-loader",
        options: {
          sourceMap: dev
        }
      };

      if (dev) {
        // For development, include source map
        appConfig.module.rules.push({
          test: /.scss$/,
          use: ["style-loader", cssLoader, postCSSLoader, sassLoader]
        });
      } else {
        // For production, extract CSS
        appConfig.module.rules.push({
          test: /.scss$/,
          use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: [cssLoader, postCSSLoader, sassLoader]
          })
        });

        appConfig.plugins.push(
          new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
          new webpack.IgnorePlugin(/moment/, /react-kronos/),
          new Visualizer()
        );
      }
    } else {
      appConfig.module.rules.push({
        test: /.scss$/,
        use: ["ignore-loader"]
      });
    }

    return appConfig;
  }
};

When using this I get:

Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example

Anyone else get this? Any advice?

Same error here

./src/common/pages/Home.scss
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin

same here

I had the same problem and I solved setting the extract-text-webpack-plugin in the package.json to "4.0.0-beta.0"