mini-css-extract-plugin ПРЕДУПРЕЖДЕНИЕ в chunk 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",

Ответы

Ответ 1

CSS cares for rule order.

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

A: При упаковке ваших CSS-модулей возникают конфликты порядка.

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

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

В: Как это исправить?

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

Ответ 2

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

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