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

Question

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

./resources/sass/frontend/app.scss 中的错误模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）：ModuleBuildError：模块构建失败（来自 ./node_modules/css- loader/dist/cjs.js): ValidationError: 无效的选项对象。CSS Loader 已使用与 AP I 架构不匹配的选项对象进行初始化。

• options.url 应该是以下之一：boolean | 对象{过滤器？} -> 允许启用/禁用url()/image-set()功能处理。-> 在https://github.com/webpack-contrib/css-loader#url阅读更多 详情：
  • options.url 应该是一个布尔值。
  • options.url 应该是一个对象： object { filter? 在验证 (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

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，但没有成功。

Answer 1

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

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