Webpack return ValidationError: CSS Loader Invalid Options

Question

I'm getting an error for css loader invalid option and my webpack.conifg.js code is as follows :

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");

const htmlWebpackPlugin = new HtmlWebPackPlugin({
    template: "./public/index.html"
});

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve('dist'),
        filename: 'bundled.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            modules: true,
                            importLoaders: 1,
                            localIdentName:"[name]_[local]_[hash:base64]",
                            sourceMap: true,
                            minimize: true
                        }
                    }
                ]
            },
            { 
                test: /\.(png|jpg|woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=100000' 
            }
        ]
    },
plugins: [htmlWebpackPlugin]
};

I don't know where I'm doing wrong.Please help me to solve this issue. I'm using webpack for reactjs 4 and webpack version is 4. Thanks

Why do you need both css and style loader?Did you try to delete css loader and just lyve style one? — Hisagr
– Hisagr, Commented Jan 16, 2019 at 14:44
i got Module parse failed: Unexpected character '@' after remove style-loader — Gopal Singh Thakur
– Gopal Singh Thakur, Commented Jan 18, 2019 at 10:58

Ion · Accepted Answer · 2019-07-07 21:31:20Z

5

This is what resolved my case:

css-loader 2.1.1

{ loader: 'style-loader'},
{
  loader: 'css-loader',
  options: {
    modules: true,
    localIdentName: '[local]',
    import: true,
    importLoaders: true,
  }
},
{ loader: 'sass-loader'}

css-loader 3.0.0

{ loader: 'style-loader'},
{
  loader: 'css-loader',
  options: {
    modules: {
      mode: 'local',
      localIdentName: '[local]',
    },
    import: true,
    importLoaders: true,
  }
},
{ loader: 'sass-loader'}

edited Jul 7, 2019 at 21:31

answered Jul 7, 2019 at 21:25

Ion

1,30214 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mani Over a year ago

This worked for me too. There is change in syntax and I am surprised it is not mentioned anywhere.

mtonev · Accepted Answer · 2019-01-19 15:19:31Z

3

Try commenting out:

// minimize: true

answered Jan 19, 2019 at 15:19

mtonev

3253 silver badges8 bronze badges

Comments

Jay Kariesch · Accepted Answer · 2019-06-12 21:56:16Z

0

Commenting out minimize worked previously, though I began a new project with a fresh install of css-loader, and the culprit this time around is importLoader: 1. Just remove importLoader and it should work.

I'm using css modules with React, and everything is running properly.

answered Jun 12, 2019 at 21:56

Jay Kariesch

1,4929 silver badges14 bronze badges

Comments

krrskl · Accepted Answer · 2019-11-01 19:28:23Z

0

This worked for my VUE Js project:

Browse to the /build/utils.js file and in the object of thecss-loader comment on the option that is marking you in the error. In my case I had to comment:

minimize: process.env.NODE_ENV === 'production',

answered Nov 1, 2019 at 19:28

krrskl

1412 silver badges6 bronze badges

Collectives™ on Stack Overflow

Webpack return ValidationError: CSS Loader Invalid Options

4 Answers 4

css-loader 2.1.1

css-loader 3.0.0

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

css-loader 2.1.1

css-loader 3.0.0

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related