Laravel Mix: ValidationError: CSS Loader has been initialized using an options object that does not match the API schema

Question

I recently tried to run npm run dev and also npm run watch, but I got an error after 80% got compiled. I tried googling it but didn't find the solution to it. Below is the error which I get in my console.

ERROR in ./resources/sass/frontend/app.scss Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js): ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the AP I schema.

• options.url should be one of these: boolean | object { filter? } -> Allows to enables/disables url()/image-set() functions handling. -> Read more at https://github.com/webpack-contrib/css-loader#url Details:
  • options.url should be a boolean.
  • options.url should be an object: object { filter? } at validate (E:\Web Projects\project\node_modules\webpack\node_modules\schema-utils\dist\validate.js:105:11) at Object.getOptions (E:\Web Projects\project\node_modules\webpack\lib\NormalModule.js:527:19) at Object.loader (E:\Web Projects\project\node_modules\css-loader\dist\index.js:31:27) at processResult (E:\Web Projects\project\node_modules\webpack\lib\NormalModule.js:701:19) at E:\Web Projects\project\node_modules\webpack\lib\NormalModule.js:807:5 at E:\Web Projects\project\node_modules\loader-runner\lib\LoaderRunner.js:399:11 at E:\Web Projects\project\node_modules\loader-runner\lib\LoaderRunner.js:251:18

webpack.mix.js

const mix = require('laravel-mix');

mix.setPublicPath('public')
    .setResourceRoot('../')
    .vue()
    .sass('resources/sass/frontend/app.scss', 'css/frontend.css')
    .sass('resources/sass/backend/app.scss', 'css/backend.css')
    .js('resources/js/frontend/app.js', 'js/frontend.js')
    .js([
        'resources/js/backend/before.js',
        'resources/js/backend/app.js',
        'resources/js/backend/after.js'
    ], 'js/backend.js')
    .js('resources/js/global.js', 'js/global.js')
    .js('resources/js/Banners/banner.js', 'js/banner.js')
    .extract([
        // Extract packages from node_modules to vendor.js
        'alpinejs',
        'jquery',
        'bootstrap',
        'popper.js',
        'axios',
        'sweetalert2',
        'lodash'
    ])
    .sourceMaps();

if (mix.inProduction()) {
    mix.version();
} else {
    // Uses inline source-maps on development
    mix.webpackConfig({
        loader: 'url-loader',
        devtool: 'inline-source-map'
    });
}

Both Frontend.scss & Backend.scss are not getting compiled or mixed and throws up an error given above. When I tried to comment it, it ran properly as expected, but without commenting it, it doesn't. I don't know where I am going wrong here. I also tried to run npm rebuild node-sass and then again tried to run npm run prod, npm run dev & npm run watch, but none worked.

Answer 1

As a workaround, downgrade your css-loader package to a 5.x version.

npm install [email protected] --save-dev