web-dev-qa-db-fra.com

mini-css-extract-plugin AVERTISSEMENT dans le bloc chunkName [mini-css-extract-plugin] Ordre conflictuel entre:

AVERTISSEMENT en morceaux AccessRights ~ Groupes ~ Navigateur [mini-css-extract-plugin] Ordre conflictuel entre:

  • css ../node_modules/css-loader??ref--7-1!../node_modules/postcss-loader/lib!./components/Icon/_circle/Icon_circle.scss
  • css ../node_modules/css-loader??ref--7-1!../node_modules/postcss-loader/lib!./components/Counter/Counter.scss
  • css ../node_modules/css-loader??ref--7-1!../node_modules/postcss-loader/lib!./components/NavigatorToolbar/NavigatorToolbar.scss

qu'est-ce que cela signifie et comment y remédier? Merci d'avance!

"assets-webpack-plugin": "3.9.5",
"autoprefixer": "9.1.0",
"css-loader": "1.0.0",
"file-loader": "1.1.11",
"image-webpack-loader": "4.3.1",
"mini-css-extract-plugin": "0.4.2",
"postcss-advanced-variables": "2.3.3",
"postcss-clearfix": "2.0.1",
"postcss-conditionals": "2.1.0",
"postcss-extend": "1.0.5",
"postcss-functions": "3.0.0",
"postcss-hexrgba": "1.0.1",
"postcss-import": "12.0.0",
"postcss-loader": "2.1.6",
"postcss-media-minmax": "3.0.0",
"postcss-nested": "3.0.0",
"postcss-sassy-mixins": "2.1.0",
"postcss-simple-vars": "4.1.0",
"postcss-size": "2.0.0",
"postcss-urlrewrite": "0.2.2",
"source-map-loader": "0.2.3",
"string-replace-loader": "2.1.1",
"style-loader": "0.22.0",
"url-loader": "1.0.1",
"webpack": "4.16.5",
"webpack-cli": "3.1.0",
"webpack-dev-server": "3.1.5",
csswebpackmini-css-extract-plugin
13
sevaTechnoPark

CSS se soucie de l'ordre des règles.

Q: Que signifie l'avertissement?

R: Il y a des conflits d'ordre lors de l'empaquetage de vos modules CSS.

Q: Quelle est la cause?

R: Le plugin (mini-css-extract-plugin) essaie de générer un fichier CSS mais votre base de code a plusieurs ordres possibles pour vos modules. D'après l'avertissement que vous avez affiché, il semble que vous ayez utilisé Icon avant Counter dans un emplacement et Counter avant Icon dans un autre emplacement. Le plugin doit générer un seul fichier CSS pour ceux-ci et ne peut pas décider quel CSS du module doit être placé en premier. CSS se soucie de l'ordre des règles, ce qui peut entraîner des problèmes lorsque CSS change sans raison. Donc, ne pas définir un ordre clair peut conduire à des constructions fragiles, c'est pourquoi il affiche un avertissement ici.

Q: Comment réparer?

R: Triez vos importations pour créer une commande cohérente. Si vous ne voulez pas vous embêter avec cela, vous pouvez ignorer l'avertissement avec stats.warningFilter (comme indiqué dans la réponse donnée par Czilla) lorsque l'ordre de ces styles n'a pas d'importance.

7
UtkarshPramodGupta

Veuillez voir problème signalé sur Github .

 const webpackConfig = {
   stats: {
                  // warn => /Conflicting order between:/gm.test(warn)
     warningsFilter: warn => warn.indexOf('Conflicting order between:') > -1 // if true will ignore
   }
 }
0
Czilla