Laravel Mix:ValidationError:CSS Loader 已使用与 API 架构不匹配的选项对象进行初始化

问题描述

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

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 模块构建失败(来自./node_modules/mini-css-extract-plugin/dist/loader.js):ModuleBuildError:模块构建失败(来自./node_modules/css-loader/dist/cjs.js): ValidationError: Invalid选项对象.CSS Loader 已使用选项初始化与 AP I 架构不匹配的对象.

• options.url 应该是以下之一:boolean |对象{过滤器?} ->允许启用/禁用 url()/image-set() 函数处理.->阅读更多https://github.com/webpack-contrib/css-loader#url 详情:
  • options.url 应该是一个布尔值.
  • options.url 应该是一个对象:对象{过滤器?}在验证 (E:\Web Projects\project\node_modules\webpack\node_modules\schema-utils\dist\validate.js:105:11)在 Object.getOptions (E:\Web Projects\project\node_modules\webpack\lib\NormalModule.js:527:19)在 Object.loader (E:\Web Projects\project\node_modules\css-loader\dist\index.js:31:27)在 processResult (E:\Web Projects\project\node_modules\webpack\lib\NormalModule.js:701:19)在 E:\Web Projects\project\node_modules\webpack\lib\NormalModule.js:807:5在 E:\Web Projects\project\node_modules\loader-runner\lib\LoaderRunner.js:399:11在 E:\Web Projects\project\node_modules\loader-runner\lib\LoaderRunner.js:251:18
  • options.url should be one of these: boolean | object { filter? } -> Allows to enables/disables url()/image-set() functions handling. -> Read more athttps://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:5at E:\Web Projects\project\node_modules\loader-runner\lib\LoaderRunner.js:399:11at 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，但没有任何效果.

    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.

    推荐答案

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

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

    npm install [email protected] --save-dev
    

    这篇关于Laravel Mix:ValidationError:CSS Loader 已使用与 API 架构不匹配的选项对象进行初始化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！