mini-css-extract-plugin ПРЕДУПРЕЖДЕНИЕ в chunkName [mini-css-extract-plugin] Конфликтный порядок между:

ВНИМАНИЕ в чанке AccessRights~Groups~Navigator [mini-css-extract-plugin] Конфликтный порядок между:

  • 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

что это значит и как это исправить? Заранее спасибо!

"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",
Источник

5 ответов

Это легко может стать надоедливой ошибкой! Я потратил 6 часов на его отладку (включая установку console.log в исходном коде mini-css-extract-plugin где опущено предупреждение), и вот мои выводы.

Что это за плагин?

Мини-CSS-экстракт-плагин из WebPack является CSS-пакетирования. Он нужен для того, чтобы собрать части CSS и поместить их в .cssкуски для вас. Так же, как и вся сборка Webpack. .js файлы.

Почему это происходит со мной?

Вы сталкиваетесь с этим, потому что к вам относятся все эти условия:

  1. У вас есть Vue SFC или CSS-in-JS, в результате чего ваш CSS-контент находится в разных файлах (которые называются модулями ).
  2. Конфигурации вашего веб-пакета настроены на какую-то оптимизацию разделения кода (например, с помощью ), который плагина split-chunks-pluginразбивает ваши модули на фрагменты для ленивой загрузки на стороне клиента (например, 1000 файлов на 10 фрагментов, которые являются только загружаются пользователем, когда они нужны пользователю.) Итак, этот плагин описывает, как webpack объединяет ваши модули, и пытается создать из них свои собственные пакеты CSS .
  3. В вашем импорте есть "конфликт заказов"!

Что сейчас такое «Конфликт заказов»?

Это «порядок» + «конфликт». Давайте рассмотрим их.

Часть 1) Заказ

Этот плагин пытается запустить алгоритм топологической сортировки ( эта часть исходного кода), чтобы выяснить, в каком порядке он должен помещать правила CSS в свои выходные пакеты, чтобы не вызывать никаких проблем.

Проблема в том, что, в отличие от JavaScript, вы явно export ваши объекты из файла / модуля (в произвольном порядке, как они названы), в CSS они будут просто добавлены (как массив строк), и поэтому порядок импорта действительно может иметь значение!

Допустим, у вас есть два модуля:

      // module a.js
<div>hi, I am A!</div>
// ... in CSS section of the same file:
div { color: red; }

      // module b.js
<div>hi, I am B!</div>
// ... in CSS section of the same file:
div { color: blue; }

И тогда у вас есть страница, которая включает их обоих.

      // page S (for Straight)
import a from "a.js"
import b from "b.js"

Все идет нормально! Вывод CSS может быть

      div { color: red; }
div { color: blue; }

Это означает, что все буквы должны иметь синий цвет шрифта .

Однако, если бы вместо этой страницы S у нас была бы страница, которая импортировала их в обратном порядке, это было бы:

      // page R (for Reverse)
import b from "b.js"
import a from "a.js"

и результат будет равен

      div { color: blue; }
div { color: red; }

Это означает, что все буквы должны иметь красный цвет шрифта .

Вот почему порядок импорта имеет значение.

Часть 2) Конфликт

Итак, каким должен быть выходной CSS, если у вас есть и страница S, и страница R?

Обратите внимание: в отличие от этого глупого примера применения дикого правила ко всем <div>элементов, у вас на самом деле может быть какой-то CSS с ограниченной областью видимости или соглашение об именах CSS, такое как БЭМ , которое предотвратит превращение таких вещей в проблему. Но этот плагин не выполняет фактический синтаксический анализ и понимание содержимого CSS. Он просто жалуется: « Привет, чувак! Я не знаю, надо ли приходить раньше, или b должен прийти раньше a!"

Решения

По сути, у вас есть два решения, как и у любой другой проблемы! Либо реши, либо убей проблему.

Решение 1. Исправить

Сообщение об ошибке очень трудно прочитать, и иногда оно даже не выводит правильную информацию о модулях. (для меня это как , , , , , , так как по какой-то причине мои ChunkGroups не имеют .nameимущество; Так что никакой информации.) И это может быть очень беспорядочно, если у вас более ~20 файлов.

В любом случае, если у вас есть время, этот подход - лучшее, что вы можете попробовать.

Заметки:

  • ВАЖНОЕ ПРИМЕЧАНИЕ 1. ЕСЛИ ВЫ ДУМАЕТЕ, ЧТО СОРТИРОВКА СТРОК ИМПОРТА БУКВЕТНО МОЖЕТ ПОЛУЧИТЬ ПОМОЩЬ, СМОТРИТЕ ЭТОТ ПРИМЕР!
  • ВАЖНОЕ ПРИМЕЧАНИЕ 2. Конфликт заказов НЕ ОБЯЗАТЕЛЬНО В ОДНОМ ФАЙЛЕ. Это может быть любое место среди предков двух или более файлов! Так что это может быть огромной болью, чтобы узнать.
  • ВАЖНОЕ ПРИМЕЧАНИЕ 3: ЭТО НЕ БУДЕТ НАДЕЖНЫМ НА БУДУЩЕЕ!Итак, даже если вы переместите несколько строк импорта вверх и вниз, завтра это может случиться с другим разработчиком в вашей команде.

Итак, TL;DR, если вы обнаружили, что потратили на это более двух часов, попробуйте решение № 2 ниже.

Решение 2: убить его

Если это на самом деле не вызывает проблемы в производстве и в вашем конечном результате, вы можете подавить эту ошибку, передав ignoreOrderflag объекту параметров плагина в вашей конфигурации Webpack.

Это хорошее последнее средство! Удачи. :)

Источник

CSS заботится о порядке правил.

В: Что означает предупреждение?

О: Есть некоторые конфликты порядка при упаковке ваших CSS-модулей.

В: В чем причина?

О: Плагин (mini-css-extract-plugin) пытается сгенерировать файл CSS, но в вашей кодовой базе есть несколько возможных порядков для ваших модулей. Судя по предупреждению, которое вы показали, похоже, вы использовалиIcon перед Counter в одном месте и Counter перед Iconв другом месте. Плагину необходимо сгенерировать из них один файл CSS, и он не может решить, какой модуль CSS следует разместить первым. CSS заботится о порядке правил, поэтому это может привести к проблемам при изменении CSS без причины. Таким образом, отсутствие четкого порядка может привести к нестабильности сборки, поэтому здесь отображается предупреждение.

Q: Как исправить?

О: Отсортируйте импорт, чтобы создать последовательный порядок. Если вы не хотите беспокоиться об этом, вы можете игнорировать предупреждение с помощью stats.warningFilter (как показано в ответе Czilla), когда порядок этих стилей не имеет значения.

Источник

mini-css-extract-plugin версии 0.8.0 включает новую опциюignoreOrder. Вы можете проверить https://github.com/webpack-contrib/mini-css-extract-plugin

new MiniCssExtractPlugin({
  ignoreOrder: true,
}),
Источник

Пожалуйста, смотрите сообщение о проблеме на Github.

 const webpackConfig = {
   stats: {
                  // warn => /Conflicting order between:/gm.test(warn)
     warningsFilter: warn => warn.indexOf('Conflicting order between:') > -1 // if true will ignore
   }
 }
Источник

Теперь существует пакет NPM с именем @webkrafters / ordercss, который решает эту проблему.

Полное раскрытие информации: изначально я создал его для решения этой самой проблемы в одном из моих приложений, но решил расширить его и поделиться им со всеми.

Если этот пакет кому-то поможет, поделитесь им с другими.

Спасибо и удачи!

Источник
Другие вопросы по тегам