Extract text Webpack plugin compile error

Question

I'm using "webpack": "^3.1.0" and "extract-text-webpack-plugin": "^1.0.1"

Trying to compile sass and I get the following error: 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

I have used this as per the documents provided - don't understand why I'm getting webpack build errors.

Here is my webpack file:

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', './styles/base.scss'],
  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$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          //resolve-url-loader may be chained before sass-loader if necessary
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "client.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    new ExtractTextPlugin('main.css')
  ],
};

@jantimon Can you please explain your comment? I don't quite understand. — Filth, Oct 03 '17 at 15:52
`plugins: debug ? [] :` means that you won't use any plugins if debug is not true — jantimon, Oct 03 '17 at 16:38
@jantimon Ok so I need to remove this? I'm unsure how debug is affecting this as well — Filth, Oct 03 '17 at 16:57

score 0 · Answer 1 · answered Oct 03 '17 at 16:59

0

You need to include something to tell where webpack to look, for example:

 {
    test: /(\.css|\.scss|\.sass)$/,
    include: path.join(__dirname, "../src"), // Include or exclude node modules
    use: ExtractTextPlugin.extract({
      fallback: "style-loader",
      use: ["css-loader", "sass-loader"],
    }),
 },

answered Oct 03 '17 at 16:59

Tony Tai Nguyen

1,502
13
27

not sure why you have `'./styles/base.scss'` there..., the include or exclude is to exclusively tell the loader where to look for your styes. The entry is for where you want webpack to look to start bundling. – Tony Tai Nguyen Oct 03 '17 at 17:23

score 0 · Answer 2 · answered Oct 03 '17 at 18:45

Here is my webpack.config.babel.js file I hope this will helps you.



    import HtmlWebpackPlugin from 'html-webpack-plugin';
    import ExtractTextPlugin,{extract} from 'extract-text-webpack-plugin';
    import {resolve,join} from 'path';
    // import webpack from 'webpack';

    // var isProd = process.env.NODE_ENV === 'production'; //return true or false
    // var cssDev = [ "style-loader", "css-loader", "sass-loader" ];
    // var cssProd = extract({
    //     fallback: "style-loader",
    //     use: [ "css-loader", "sass-loader"],
    //     publicPath:'/dist'  
    // });
    // var cssConf = isProd ? cssProd : cssDev;


    module.exports = {
        entry: {
            app:'./src/app.js',
        },
        output: {
            path: join(__dirname, "dist"),
            filename : '[name].bundle.js' 
        },
        module: {
            rules:[
                {
                    test: /\.scss$/,
                    exclude: /node_modules/,
                    use: extract({
                        fallback: "style-loader",
                        use: [ "css-loader", "sass-loader"],
                        publicPath:'/dist'  
                    })
                },
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: "babel-loader"
                },
                {
                    test: /\.(png|jpg|gif)$/,
                    use:"file-loader",
                }
            ]
        },
        devServer:{
            contentBase: join(__dirname, "dist"),
            compress: true,
            port: 9000,
            stats:'errors-only',
        },
        plugins: [
            new HtmlWebpackPlugin({
                title: 'Webpack starter project',
                template: './src/index.html',
                hash:true,
                excludeChunks: ['contact'],
                minify:{
                    collapseWhitespace: true,
                    minifyCSS: true,
                    minifyJS:true,
                }
            }),
            new ExtractTextPlugin({
                filename: "app.css",
                // disable: !isProd,
                disable: false,            
                allChunks: true
            }),
            // new webpack.HotModuleReplacementPlugin(),
            // new webpack.NamedModulesPlugin(),
        ]
    }

score 0 · Answer 3 · answered Oct 04 '17 at 12:56

0

you have to change the version of Extract Text Plugin
Instead of new ExtractTextPlugin('main.css') use new ExtractTextPlugin({ filename: "main.css"})

answered Oct 04 '17 at 12:56

Ashutosh Ranjan

642
5
12

Extract text Webpack plugin compile error

3 Answers3