web-dev-qa-db-ja.com

チャンクchunkNameのmini-css-extract-plugin警告[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",
csswebpackmini-css-extract-plugin
13
sevaTechnoPark

CSSはルールの順序を考慮。

Q：警告はどういう意味ですか？

A：CSSモジュールのパッケージ化中に、いくつかの順序の競合があります。

Q：原因は何ですか？

A：プラグイン（mini-css-extract-plugin）はCSSファイルを生成しようとしますが、コードベースにはモジュールの複数の可能な順序があります。示した警告から、ある場所ではIconの前にCounterを使用し、別の場所ではCounterの前にIconを使用したようです。プラグインはこれらに対して単一のCSSファイルを生成する必要があり、どのモジュールのCSSを最初に配置するかを決定できません。 CSSはルールの順序を考慮しているため、CSSが理由なく変更されると問題が発生する可能性があります。したがって、明確な順序を定義しないと、ビルドが壊れやすくなる可能性があるため、ここに警告が表示されます。

Q：修正方法

A：インポートをソートして、一貫した順序を作成します。気にしたくない場合は、これらのスタイルの順序が重要でない場合、stats.warningFilter（Czillaの回答に示されている）を使用して警告を無視できます。

7
UtkarshPramodGupta

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