Ant-design: コンパイル警告：チャンクスタイル[mini-css-extract-plugin]..。間の順序が競合しています。

作成日 2019年02月18日 · 35コメント · ソース: ant-design/ant-design

この警告はオンライン環境では再現できないため、直接送信します。

問題

Next.jsプロジェクトでAntDesignを使用しています。 babel-plugin-importを使用してantdコンポーネントをオンデマンドでロードしています。最初のページを表示しても問題ありませんが、別のページに切り替えると、次の警告が表示されます。

chunk styles [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-2!./node_modules/less-loader/dist/cjs.js??ref--5-3!./node_modules/antd/lib/button/style/index.less
 * css ./node_modules/css-loader??ref--5-2!./node_modules/less-loader/dist/cjs.js??ref--5-3!./node_modules/antd/lib/dropdown/style/index.less

また、ページのスタイルが正しくないため、更新後に問題がなくなりました。

プロジェクトをビルドするときに、次の警告も表示されました。

➜  web git:(master) ✗ npm run build

> [email protected] build /Users/jagger/projects/jwpay/web
> next build


✔ Client
  Compiled successfully in 12.77s

✔ Server
  Compiled successfully in 8.64s

> Using external babel configuration
> Location: "/Users/jagger/projects/jwpay/web/.babelrc"
> Emitted warnings from webpack
Error: chunk commons [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./node_modules/less-loader/dist/cjs.js??ref--5-2!./node_modules/antd/lib/button/style/index.less
 * css ./node_modules/css-loader??ref--5-1!./node_modules/less-loader/dist/cjs.js??ref--5-2!./node_modules/antd/lib/dropdown/style/index.less
    at MiniCssExtractPlugin.renderContentAsset (/Users/jagger/projects/jwpay/web/node_modules/mini-css-extract-plugin/dist/index.js:342:37)
    at Object.render (/Users/jagger/projects/jwpay/web/node_modules/mini-css-extract-plugin/dist/index.js:173:32)
    at Compilation.createChunkAssets (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:2429:29)
    at hooks.optimizeTree.callAsync.err (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:1299:10)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.seal (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:1244:27)
    at hooks.make.callAsync.err (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compiler.js:624:17)
    at _err0 (eval at create (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:11:1)
    at Promise.all.then (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/DynamicEntryPlugin.js:74:20)
    at process.internalTickCallback (internal/process/next_tick.js:77:7)
Error: chunk commons [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./node_modules/less-loader/dist/cjs.js??ref--5-2!./node_modules/antd/lib/dropdown/style/index.less
 * css ./node_modules/css-loader??ref--5-1!./node_modules/less-loader/dist/cjs.js??ref--5-2!./node_modules/antd/lib/icon/style/index.less
    at MiniCssExtractPlugin.renderContentAsset (/Users/jagger/projects/jwpay/web/node_modules/mini-css-extract-plugin/dist/index.js:342:37)
    at Object.render (/Users/jagger/projects/jwpay/web/node_modules/mini-css-extract-plugin/dist/index.js:173:32)
    at Compilation.createChunkAssets (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:2429:29)
    at hooks.optimizeTree.callAsync.err (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:1299:10)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.seal (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:1244:27)
    at hooks.make.callAsync.err (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compiler.js:624:17)
    at _err0 (eval at create (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:11:1)
    at Promise.all.then (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/DynamicEntryPlugin.js:74:20)
    at process.internalTickCallback (internal/process/next_tick.js:77:7)
Error: chunk commons [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./node_modules/less-loader/dist/cjs.js??ref--5-2!./node_modules/antd/lib/menu/style/index.less
 * css ./node_modules/css-loader??ref--5-1!./node_modules/less-loader/dist/cjs.js??ref--5-2!./node_modules/antd/lib/icon/style/index.less
    at MiniCssExtractPlugin.renderContentAsset (/Users/jagger/projects/jwpay/web/node_modules/mini-css-extract-plugin/dist/index.js:342:37)
    at Object.render (/Users/jagger/projects/jwpay/web/node_modules/mini-css-extract-plugin/dist/index.js:173:32)
    at Compilation.createChunkAssets (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:2429:29)
    at hooks.optimizeTree.callAsync.err (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:1299:10)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.seal (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:1244:27)
    at hooks.make.callAsync.err (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compiler.js:624:17)
    at _err0 (eval at create (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:11:1)
    at Promise.all.then (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/DynamicEntryPlugin.js:74:20)
    at process.internalTickCallback (internal/process/next_tick.js:77:7)
Error: chunk commons [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./node_modules/less-loader/dist/cjs.js??ref--5-2!./node_modules/antd/lib/tooltip/style/index.less
 * css ./node_modules/css-loader??ref--5-1!./node_modules/less-loader/dist/cjs.js??ref--5-2!./node_modules/antd/lib/icon/style/index.less
    at MiniCssExtractPlugin.renderContentAsset (/Users/jagger/projects/jwpay/web/node_modules/mini-css-extract-plugin/dist/index.js:342:37)
    at Object.render (/Users/jagger/projects/jwpay/web/node_modules/mini-css-extract-plugin/dist/index.js:173:32)
    at Compilation.createChunkAssets (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:2429:29)
    at hooks.optimizeTree.callAsync.err (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:1299:10)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.seal (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:1244:27)
    at hooks.make.callAsync.err (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compiler.js:624:17)
    at _err0 (eval at create (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:11:1)
    at Promise.all.then (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/DynamicEntryPlugin.js:74:20)
    at process.internalTickCallback (internal/process/next_tick.js:77:7)
 ┌ /
 ├ /_app
 ├ /_document
 ├ /_error
 ├ /login
 └ /register

環境

package.json

{
  "name": "web",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "LOG_API_REQUEST=y node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.8",
    "@fortawesome/free-brands-svg-icons": "^5.5.0",
    "@fortawesome/free-regular-svg-icons": "^5.5.0",
    "@fortawesome/free-solid-svg-icons": "^5.5.0",
    "@fortawesome/react-fontawesome": "^0.1.3",
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-less": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "ant-design-pro": "^2.2.1",
    "antd": "^3.13.2",
    "babel-plugin-import": "^1.11.0",
    "bootstrap": "^4.1.3",
    "express": "^4.16.4",
    "i": "^0.3.6",
    "isomorphic-unfetch": "^3.0.0",
    "less": "^3.9.0",
    "less-vars-to-js": "^1.3.0",
    "next": "^8.0.1",
    "node-sass": "^4.10.0",
    "npm": "^6.4.1",
    "react": "^16.8.1",
    "react-dom": "^16.8.1",
    "react-redux": "^5.1.1",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "http-proxy-middleware": "^0.19.1",
    "redux-devtools-extension": "^2.13.5"
  }
}

.babelrc

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      },
      "antd"
    ],
    [
      "import",
      {
        "libraryName": "ant-design-pro",
        "style": true,
        "camel2DashComponentName": false,
      },
      "ant-design-pro"
    ]
  ]
}

next.config.js

const withCSS = require('@zeit/next-css')
const withSass = require('@zeit/next-sass')
const withLess = require('@zeit/next-less')
const lessToJS = require('less-vars-to-js')
const fs = require('fs')
const path = require('path')

// fix: prevents error when .less files are required by node
if (typeof require !== 'undefined') {
  require.extensions['.less'] = file => { }
}

const isProd = process.env.NODE_ENV === 'production'

module.exports = withLess(withSass(withCSS({
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: lessToJS(
      fs.readFileSync(path.resolve(__dirname, './assets/antd.less'), 'utf8')
    ),
  },
})))

ソース

jaggerwang

👍1

最も参考になるコメント

ここにいる人の半数が中国語（またはそれが何であれ）で応答しているのを見てうれしいです。次回チケットを開くときはイタリア語になります。

AmazingTurtle 2019年08月26日

👍34 😄20 👎9 👀1 😕1

全てのコメント35件

こんにちは@jaggerwang 、問題の要件に準拠していないため、問題はクローズされました。問題ヘルパーを使用して

こんにちは@jaggerwang、効率的に通信できるようにするために、問題には特定のフォーマット要件があり、要件を満たしていないため、問題は自動的にクローズされます。問題アシスタントを使用して問題を作成し、エラーの特定に役立てることができます。ご協力ありがとうございます！

ant-design-bot 2019年02月18日

👎9

Issueにこのような高いしきい値を設定する必要がありますか？私は、このような厳しい要件を持つオープンソースプロジェクトを見たことがありません。すべてのプロジェクトをオンラインで簡単にデモンストレーションできるわけではありません。このコンパイルとパッケージングのエラーは非常に明確に説明されており、簡単に再現できます。

jaggerwang 2019年02月18日

👍31 👎10

2階の説明が注意深く準備されているのは残念です。私も同じ問題に遭遇しました。どのようにそれを解決しましたか？

bluenergy 2019年02月19日

👍5

@bluenergyは未解決ですが、機能するので、最初に置きましょう。 Antdに問題を言及するのは本当に面倒です。他の説明は簡単に言うことができますが、実際の例を示す必要があります。コードは非公開であり、デモの例全体を公開するにはかなりの時間がかかります。重要なのは、この問題は使用法とはほとんど関係がなく、主に構成に関するものであり、再現するのは難しくないということです。同じレベルの他のプロジェクトと比較して、Antdの問題が非常に少ないのも不思議ではありません。これが理由です。

jaggerwang 2019年02月20日

👍8 👎2

このような厳しい要件を持つオープンソースプロジェクトを見たことがありません。

これは事実ではありません。実際、問題ヘルパー全体のアイデアは、vueコミュニティの実践に基づいています。

再現には多くのエネルギーが必要であり、私たちの能力とエネルギーも限られています。より多くの情報と再現性のあるフィードバックを提供するものよりも限られたリソースを優先します。多くの問題（特にwebpack構成）はオンラインコードサンドボックスでは提供できないことがわかっています。このような状況では、再現するための最小限のgitリポジトリリポジトリを提供できます。関連情報と理由は、vueの作者であるYouXiaoyouによって明確に書かれています。

同じレベルの他のプロジェクトと比較して、Antdの問題が非常に少ないのも不思議ではありません。これが理由です。

上記のプロジェクトは、厳格な問題ヘルパーと自動クローズ機能も提供しますが、問題処理は依然として最も効率的なものの1つです。これは、1つはより勤勉であり、もう1つはコミュニティの学生の献身が多いことであり、3つ目は良いフィードバックそれはあなたと私をより効率的にすることができます。

最後に、フィードバックと理解をありがとう@jaggerwang 。この問題に関しては、再現可能なgitリポジトリを提供した後、再開してフォローアップします。

afc163 2019年02月22日

👍10 👎1

とった！時間があるときに入手してください。

jaggerwang 2019年02月23日

@jaggerwang @ afc163でもこの問題が発生し、 create-react-appを使用して問題を再現するbabel-plugin-importと遅延読み込みを追加し、antdコンポーネントを簡単に使用し、詳細なレコードをgitし、 yarn buildを実行すると、次の警告が表示されます。

この問題を解決しようと試みたところ、3つの解決策が見つかりました。便宜上3つのブランチが作成されました。調整後、 yarn build実行した後、プロンプトが表示されなくなりました。

手動ブランチ。コンポーネントとそれに対応するスタイルをantdから直接手動でインポートします。
No-lazyブランチ、遅延読み込みを使用しない、またはコード分割を使用しない。
No-css-importブランチは、babel-plugin-importを使用する場合、次のように構成します。スタイルファイルはコンポーネントと一緒にオンデマンドでロードされなくなり、コンポーネントのみがロードされ、スタイル全体がにインポートされます。エントリファイル。これはいくつかの不要なコンポーネントスタイルの導入につながりますが、ほとんどのantdコンポーネントが通常プロジェクトで使用されることを考えると、そうしても実際のパッケージ化されたcssボリュームはそれほど増加しません。

"plugins": [
  [
    "import",
    {
      "libraryName": "antd",
      "libraryDirectory": "es"
    }
  ]
]

もちろん、これらは私の一時的な解決策であり、大物が理由を説明し、より多くの解決策を提供できることを願っています。

HaoChuan9421 2019年03月04日

👍8 🎉1

私もこの問題を抱えています、さまざまなスタイルの衝突

wanliyunyan 2019年03月22日

私もこの問題に遭遇しました、助けてください！

makstr 2019年03月22日

https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250#issuecomment -415345126

ztplz 2019年03月22日

React.lazyを導入したときに、同じ問題が発生しました。残念ながら、私は大規模なコードベースで高レベルでコードを分割し始めましたが、それでもどのインポートが間違った順序であるかを追跡することができませんでした。

bartimaeus 2019年04月21日

私は同じ問題を抱えています。喜んでいくつかの助けをいただければ幸いです。 next-antd-aza-less - https： //www.npmjs.com/package/next-antd-aza-lessを追加すると、この問題が発生し始めました。

danielsimao 2019年04月24日

umiコードを調べた後、プラグインFilterCSSConflictingWarningを

lonsdale8734 2019年05月04日

@ lonsdale8734このプラグインを追加しました。それでも最新バージョンで問題が発生する場合は、リポジトリを作成してください。それを見ていきます。

ztplz 2019年05月04日

antdコンポーネントのスタイルは独立しており、スタイルファイルの順序とは関係がないためです。これらの警告は無視するか、フィルターを使用してコンソールでスキップできます。
ただし、これを解決したい場合は、 mini-css-extract-pluginのアドバイスを参照して、次のようにコンポーネントのインポートの順序を維持

import { Button, Table } from 'antd'; // File 1

import { Table, Button } from 'antd'; // File 2

に

import { Button, Table } from 'antd'; // File 1

import { Button, Table } from 'antd'; // File 2

もう一度注意してください：antdコンポーネントはスタイルが独立しているため、同じ順序でインポートしても安全です。

zombieJ 2019年05月05日

👍11

@zombieJ
babel-plugin-import処理する方が良いですか？
bizプロジェクトでの順序の変更には時間がかかりすぎます。

xyy94813 2019年05月07日

@jaggerwang
このバグのもう1つの理由は、libディレクトリからコンポーネントをインポートすることです。

例えば：

import { Button } from 'antd'
import Dropdown from 'antd/lib/dropdown'

...

そして、あなたのプロジェクトはより少ないbabel-plugin-importで

今日、このケースでmini-css-extract-plugin警告が発生する可能性があることがわかりました

xyy94813 2019年05月07日

👍1

私はantdでcustomize-craを使用していますが、同じ問題が発生しました。これは私のコードであり、非常に単純で、このエラーが発生しました

const addMyPlugin = config => {
..。
};
module.exports = override（
addMyPlugin、
fixBabelImports（ "import"、{
libraryName： "antd"、
libraryDirectory： "es"、
スタイル：true
}）、
addLessLoader（{
javascriptEnabled：true、
modifyVars：{
"@ primary-color"： "＃0A4080"
}
}）
）;

shiqifeng2000 2019年06月17日

そのための解決策はありますか？

saostad 2019年07月30日

ここにいる人の半数が中国語（またはそれが何であれ）で応答しているのを見てうれしいです。次回チケットを開くときはイタリア語になります。

AmazingTurtle 2019年08月26日

👍34 😄20 👎9 👀1 😕1

@AmazingTurtleわかりましたが、開発者でGoogle翻訳のことを聞いたことがない場合は、困っています。誰もが英語を話すわけではありません。実際、彼らはほとんど話さない...それを待つ...中国語（北京語）。

Screen Shot 2019-09-19 at 2 22 35 AM

blujedis 2019年09月19日

👎8

@blujedisブラウザに埋め込まれた翻訳機能を使用しています（右クリック->翻訳）。 github.comは言語をENに設定しているため、ENをソース言語として強制し、中国語を翻訳しません。翻訳者は一度に複数の言語を翻訳することができないので、私は単に各投稿をコピーして手動で翻訳するのは好きではありません。

AmazingTurtle 2019年09月19日

😕1

react-app-rewiredまたはアナログとスティックを使用してdisable mini-css-extract-plugin warning方法を使用する場合：

"mini-css-extract-plugin": "^0.8.0"があることを確認してください。そうでない場合は、追加してください（このバージョンには、注文の警告をスキップするための追加のフラグがあります）
この〜（ひどいハック）〜をconfig-overrides.js追加します：

  // force react-scripts to use newer version of `mini-css-extract-plugin` and ignore css ordering warnings
  // (related to issue: https://github.com/facok/create-react-app/issues/5372)
  for (let i = 0; i < config.plugins.length; i++) {
    const p = config.plugins[i]
    if(!!p.constructor && p.constructor.name === MiniCssExtractPlugin.name) {
      const miniCssExtractOptions = {...p.options, ignoreOrder: true}
      config.plugins[i] = new MiniCssExtractPlugin(miniCssExtractOptions)
      break
    }
  }

illyaMs 2019年10月21日

👍7 🚀1

メニュー、ドロップダウン、ツールチップの間で問題が競合するため、ドロップダウンを外部に移動しました。それは今働いています

から

import { Menu, Dropdown, Button, Icon } from 'antd';

に

import { Menu, Button, Icon } from 'antd';
import Dropdown from 'antd/lib/dropdown';

phattranky 2019年12月19日

👍2

ソリューションは、すべてのantdコンポーネントのインポートを並べ替えるのと同じくらい簡単ですか？
これを再開できますか？！

ChuckJonas 2020年02月21日

👍1

@zombieJソリューションが常に機能するとは限りません。小さなプロジェクトのすべてのインポートを一貫性のあるものに整理しましたが、まだこの問題が発生しています。

再開してください...

ChuckJonas 2020年02月26日

Gastbyプロジェクトでも同じ問題が発生しているので、Create ReactAppだけではありません。

@ChuckJonasに同意します。

@zombieJ 、

インポートをアルファベット順に並べるだけでは問題は解決できないと思います。私はすでにこれを行っています（Prettier / ESLint経由）：

そして、私は文字通りこれらの警告のページを取得しています。

devuxer 2020年05月14日

👍5

エラーを隠すためにwebpack-filter-warnings-pluginをインストールし

const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');

module.exports = {
  // ... rest of webpack config
  plugins: [
    new FilterWarningsPlugin({ 
      exclude: /Conflicting order/,
    })
  ]
}

toqitahamid 2020年05月30日

❤1 🎉1 👎1 👍1

アプリを100％正しく表示したい場合は、警告を非表示にすることはお勧めできません。私が見つけた唯一の実際の回避策は、babelプラグインを使用する代わりに、スタイルシート全体をインポートすることです。

ChuckJonas 2020年06月02日

👍1

以下を取得しました

あなたは解決策を見つけましたか？

510846 2020年06月10日

アプリケーション内でantdコンポーネントを遅延ロードすることで、このエラーを回避できます。NextJSの例は、この方法でロードすることです。

const Menu = dynamic(() => import('antd/lib/menu'))
const MenuItem = dynamic(() => import('antd/lib/menu/MenuItem'))

ここでは、antdのメニューとメニュー項目、またはMenuItemがMenu.Itemあるimport {Menu} from 'antd'構文を使用できます。

これまでのところ、スタイル間の順序の競合に関する問題はありません。」
これは、使用量が少なく、babel-import-pluginを使用している場合に適用されます。

koolamusic 2020年06月10日

👍1

メニュー、ドロップダウン、ツールチップの間で問題が競合するため、ドロップダウンを外部に移動しました。それは今働いています
から
import { Menu, Dropdown, Button, Icon } from 'antd';
に
import { Menu, Button, Icon } from 'antd';
import Dropdown from 'antd/lib/dropdown';

これは、次のようにすべてのButtonをantd/lib/button別にインポートすることで機能していました。

import { Form, Input, Row, Col } from 'antd'
import Button from 'antd/lib/button'

ありがとう@phattranky

Mehran91z 2020年06月10日

Antdに関連する場合は、次の2つのことを行います-

babel-plugin-importのstyleオプションを指定してスタイルをインポートする場合は、 'css'からtrueに変更します。これにより、のlessバージョンがインポートされます。 antd。
あなたからスタイルをインポートする場合は'antd/dist/antd.css' 、それを変更するantd/dist/antd.less 。

next.config.js部分は、このnextjs-css-less-antdから確認できます。

GermaVinsmoke 2020年06月18日

メニュー、ドロップダウン、ツールチップの間で問題が競合するため、ドロップダウンを外部に移動しました。それは今働いています
から
import { Menu, Dropdown, Button, Icon } from 'antd';
に
import { Menu, Button, Icon } from 'antd';
import Dropdown from 'antd/lib/dropdown';

ありがとう！私のために働きます。競合するコンポーネントを個別にインポートする必要があります。私の場合、以下の3つのコンポーネントが競合するため、次のようにインポートします。

import { Button } from 'antd';
import Modal from 'antd/lib/modal';
import message from 'antd/lib/message';

はい、私はそれが醜くて愚かに見えることを知っています、しかしそれは問題を解決する唯一の方法です。

fengerzh 2020年10月22日

👍1

メニュー、ドロップダウン、ツールチップの間で問題が競合するため、ドロップダウンを外部に移動しました。それは今働いています
から
import { Menu, Dropdown, Button, Icon } from 'antd';
に
import { Menu, Button, Icon } from 'antd';
import Dropdown from 'antd/lib/dropdown';
ありがとう！私のために働きます。競合するコンポーネントを個別にインポートする必要があります。私の場合、以下の3つのコンポーネントが競合するため、次のようにインポートします。
import { Button } from 'antd';
import Modal from 'antd/lib/modal';
import message from 'antd/lib/message';
はい、私はそれが醜くて愚かに見えることを知っています、しかしそれは問題を解決する唯一の方法です。

はい、モーダルを個別にインポートすると警告が消えました。

import Modal from 'antd/lib/modal/Modal'

macshion 2020年11月03日

このページは役に立ちましたか？

0 / 5 - 0 評価

Ant-design: コンパイル警告：チャンクスタイル[mini-css-extract-plugin]..。間の順序が競合しています。

問題

環境

最も参考になるコメント

全てのコメント35件

関連する問題