如何修复卡盘警告的顺序（symfony webpack、vuetify、mini-css-extract-plugin）

Question

我使用 symfony 6、webpack 和 vue（vueitfy 和 vuetify-loader）。

我发现了带有ignoreOrder标志或state.warningFilter的类似解决方案，但不明白如何将它与symfony webpack一起使用

https://stackoverflow.com/a/58498724/15774477

https://stackoverflow.com/a/54321634/15774477

如何修复或关闭此警告？

chunk vendors-node_modules_vuetify_lib_components_VTextField_VTextField_js [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-13[0].rules[0].use[1]!./node_modules/resolve-url-loader/index.js??clonedRuleSet-13[0].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-13[0].rules[0].use[3]!./node_modules/vuetify/src/components/VInput/VInput.sass
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-13[0].rules[0].use[1]!./node_modules/resolve-url-loader/index.js??clonedRuleSet-13[0].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-13[0].rules[0].use[3]!./node_modules/vuetify/src/components/VTextField/VTextField.sass
   - couldn't fulfill desired order of chunk group(s) , , 
   - while fulfilling desired order of chunk group(s) , 


chunk vendors-node_modules_vuetify_lib_components_VTextField_VTextField_js [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-13[0].rules[0].use[1]!./node_modules/resolve-url-loader/index.js??clonedRuleSet-13[0].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-13[0].rules[0].use[3]!./node_modules/vuetify/src/components/VLabel/VLabel.sass
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-13[0].rules[0].use[1]!./node_modules/resolve-url-loader/index.js??clonedRuleSet-13[0].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-13[0].rules[0].use[3]!./node_modules/vuetify/src/components/VTextField/VTextField.sass
   - couldn't fulfill desired order of chunk group(s) , , 
   - while fulfilling desired order of chunk group(s) ,


chunk vendors-node_modules_vuetify_lib_components_VTextField_VTextField_js [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-13[0].rules[0].use[1]!./node_modules/resolve-url-loader/index.js??clonedRuleSet-13[0].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-13[0].rules[0].use[3]!./node_modules/vuetify/src/components/VMessages/VMessages.sass
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-13[0].rules[0].use[1]!./node_modules/resolve-url-loader/index.js??clonedRuleSet-13[0].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-13[0].rules[0].use[3]!./node_modules/vuetify/src/components/VTextField/VTextField.sass
   - couldn't fulfill desired order of chunk group(s) , , 
   - while fulfilling desired order of chunk group(s) , 

Entrypoint app [big] 9.57 MiB = runtime.js 34.7 KiB vendors-node_modules_mdi_js_mdi_js-node_modules_core-js_modules_es_object_to-string_js-node_m-9e6d1b.css 1.15 MiB vendors-node_modules_mdi_js_mdi_js-node_modules_core-js_modules_es_object_to-string_js-node_m-9e6d1b.js 8.14 MiB app.css 113 KiB app.js 144 KiB
webpack compiled with 3 warnings

package.json

    {    "devDependencies": {
           "@hotwired/stimulus": "^3.0.0",
           "@symfony/stimulus-bridge": "^3.0.0",
           "@symfony/webpack-encore": "^1.7.0",
           "core-js": "^3.0.0",
           "regenerator-runtime": "^0.13.2",
           "sass": "^1.49.8",
           "sass-loader": "^12.6.0",
           "vue": "^2.5",
           "vue-loader": "^15.9.5",
           "vue-template-compiler": "^2.6.14",
           "webpack-notifier": "^1.6.0"    },    "license": "UNLICENSED",    "private": true,    "scripts": {
           "dev-server": "encore dev-server",
           "dev": "encore dev",
           "watch": "encore dev --watch",
           "build": "encore production --progress"    },    "dependencies": {
           "@mdi/js": "^6.5.95",
           "vue-router": "^3.5.3",
           "vuetify": "^2.6.3",
           "vuetify-loader": "^1.7.3"    } }

webpack.config.js

const Encore = require('@symfony/webpack-encore');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');


if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')

    .addEntry('app', './assets/app.js')

    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
    .splitEntryChunks()

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    .configureBabel((config) => {
        config.plugins.push('@babel/plugin-proposal-class-properties');
    })

    // enables @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    // enables Sass/SCSS support
    .enableSassLoader()

    .addPlugin(new VuetifyLoaderPlugin())

    .enableVueLoader()
;

module.exports = Encore.getWebpackConfig();

Answer 1

只需将其添加到您的 Webpack 配置中

   .configureMiniCssExtractPlugin(
  loaderOptions => {},
  pluginOptions => {
    pluginOptions.ignoreOrder = true;
  }
)