Laravel Mix:ValidationError:使用与API模式不匹配的选项对象初始化了CSS Loader。

5

我最近尝试运行npm run devnpm run watch,但在编译完成80%后出现了错误。我试着搜索解决方案,但没有找到。以下是我的控制台中显示的错误。

ERROR in ./resources/sass/frontend/app.scss Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: 模块构建失败(来自 ./node_modules/css-loader/dist/cjs.js):ValidationError:无效 选项对象。CSS Loader使用的选项 对象与API模式不匹配。

  • options.url应为以下之一: boolean | object {filter?} -> 允许启用/禁用url()/image-set()函数处理。-> 了解更多信息,请访问 https://github.com/webpack-contrib/css-loader#url 详情:
    • options.url应为布尔值。
    • options.url应为对象: object {filter?} 在validate(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 prodnpm run devnpm run watch,但都没有起作用。

1个回答

6

作为解决方法,将您的 css-loader 包降级至 5.x 版本。

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

1
太好了!非常感谢,这个方法很有效,但我不明白为什么之前的 css-loader@6.2.0 会引起上述问题?您能否详细解释一下原因,因为如果是版本更新,可能有更多人遇到此问题。如果您认为我的问题值得,也请点个赞。再次感谢。 - Hardik Sisodia
是的,我也想知道,因为我遇到了同样的问题,希望能够理解其中的原因。 - Krys
@HardikSisodia 我也遇到了类似的问题,使用 https://github.com/rappasoft/laravel-boilerplate 时。不得不降级以使用 Mix。 - SScotti

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接