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

Question

我最近尝试运行 npm run dev 和 npm run watch，但在编译 80% 后出现错误。我尝试用谷歌搜索但没有找到解决方案。以下是我在控制台中遇到的错误。

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'
    });
}

Frontend.scss 和 Backend.scss 都没有被编译或混合，并抛出上面给出的错误。当我试图评论它时，它运行正确地按预期进行，但没有评论它，它没有。我不知道我哪里错了。我还尝试了运行 npm rebuild node-sass，然后再次尝试运行 npm run prod、npm run dev 和 npm run watch，但是 none 成功了。

Answer 1

作为解决方法，将您的 css-loader 软件包降级到 5.x 版本。

npm install css-loader@5.2.7 --save-dev

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

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

node.js

npm

laravel

webpack

laravel-mix