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

Posted 2023-02-16

【中文标题】Laravel Mix: ValidationError: CSS Loader has been initialized using an options object that does not match the API schema

【英文标题】：

【发布时间】：2021-09-28 20:30:15

【问题描述】：

我最近尝试运行 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）：验证错误：无效 选项对象。 CSS Loader 已使用选项初始化 与 API 架构不匹配的对象。

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

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

【参考方案1】：

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

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

【讨论】：

太棒了！非常感谢这有效，但我不明白为什么以前的css-loader@6.2.0 会造成上述问题？能否请您简要回答一下原因，因为我认为如果是版本更新，可能会有更多人面临这个问题。另外，如果您发现我的问题值得，请投票。再次感谢。

是的，我也想知道，因为我遇到了同样的问题并想了解这一点。

@HardikSisodia 使用github.com/rappasoft/laravel-boilerplate 对我来说类似的问题。必须降级才能使用 Mix。