Ant-design: Peringatan kompilasi: gaya potongan [mini-css-extract-plugin] Urutan yang bertentangan antara ...

Halo @jaggerwang , masalah Anda telah ditutup karena tidak sesuai dengan persyaratan masalah kami. Harap gunakan Pembantu Masalah untuk membuat masalah, terima kasih!

Halo @jaggerwang, agar dapat berkomunikasi secara efisien, kami memiliki persyaratan format tertentu untuk masalah ini, dan masalah Anda secara otomatis ditutup karena tidak memenuhi persyaratan. Anda dapat membuat masalah melalui asisten masalah untuk membantu kami menemukan kesalahan. Terima kasih atas kerja sama anda!

Apakah Anda perlu menetapkan ambang batas yang tinggi untuk Masalah? Saya belum pernah melihat proyek open source dengan persyaratan yang begitu ketat. Tidak semua proyek mudah untuk didemonstrasikan secara online. Kesalahan kompilasi dan pengemasan ini telah dijelaskan dengan sangat jelas dan dapat dengan mudah direproduksi.

Sangat disayangkan bahwa deskripsi di lantai atas disiapkan dengan hati-hati. Saya juga mengalami masalah yang sama. Bagaimana Anda menyelesaikannya?

@bluenergy belum terselesaikan, tetapi berhasil, jadi mari kita selesaikan dulu. Sangat merepotkan untuk menyebutkan Masalah ke Antd, deskripsi lain mudah dikatakan, tetapi Anda harus memberikan contoh yang berfungsi. Kode bersifat pribadi, dan butuh banyak waktu untuk mengeluarkan seluruh contoh demo. Kuncinya adalah bahwa masalah ini tidak ada hubungannya dengan penggunaan, ini terutama tentang konfigurasi, dan tidak sulit untuk mereproduksi. Tidak heran Antd Issues sangat sedikit dibandingkan dengan proyek lain dengan level yang sama, inilah alasannya.

Saya belum pernah melihat proyek open source yang memiliki persyaratan ketat seperti itu

Ini bukan masalahnya, sebenarnya ide seluruh penolong masalah didasarkan pada praktik komunitas vue.

• https://new-issue.vuejs.org/
• https://elementui.github.io/issue-generator
• https://www.iviewui.com/new-issue
• https://ecomfe.github.io/echarts-issue-helper

Dibutuhkan banyak energi untuk mereproduksi, dan kemampuan serta energi kami juga terbatas. Kami akan memprioritaskan sumber daya yang terbatas kepada mereka yang memberikan lebih banyak informasi dan umpan balik yang dapat direproduksi. Kami tahu bahwa banyak masalah (terutama konfigurasi webpack) tidak dapat diberikan melalui kode dan kotak online. Untuk situasi ini, Anda dapat menyediakan repositori git repo minimal untuk kami reproduksi. Informasi dan alasan yang relevan ditulis dengan jelas oleh penulis vue You Xiaoyou.

Tidak heran Antd Issues sangat sedikit dibandingkan dengan proyek lain dengan level yang sama, inilah alasannya.

Proyek-proyek di atas juga menyediakan pembantu masalah yang ketat dan fungsi penutupan otomatis, tetapi pemrosesan masalah kami masih salah satu yang paling efisien, karena satu adalah bahwa kami lebih rajin, yang lain adalah bahwa ada banyak pengabdian siswa komunitas, dan yang ketiga adalah Umpan balik yang baik dapat membuat Anda dan saya lebih efisien.

Akhirnya, terima kasih @jaggerwang atas umpan balik dan pengertian Anda. Mengenai masalah ini, saya akan membuka kembali dan menindaklanjuti setelah memberikan repo git yang dapat direproduksi.

Mengerti! Dapatkan satu ketika Anda punya waktu.

@jaggerwang @afc163 juga mengalami masalah ini, menggunakan create-react-app untuk membuat demo untuk mereproduksi masalah. Demo ini hanya setelah eject, tambahkan babel-plugin-import dan lazy loading , dan komponen antd yang mudah digunakan, git catatan terperinci, jalankan yarn build , Anda dapat melihat peringatan berikut:

Saya mencoba memecahkan masalah ini dan menemukan tiga solusi. Tiga cabang telah dibuat untuk kenyamanan Anda. Setelah penyesuaian, prompt tidak lagi muncul setelah menjalankan yarn build :

1. Cabang manual , secara manual mengimpor komponen dan gaya yang sesuai langsung dari antd.
2. No-lazy branch , jangan gunakan lazy loading, atau jangan gunakan code-splitting .
3. No-css-import branch , ketika menggunakan babel-plugin-import, konfigurasikan sebagai berikut: File gaya tidak lagi dimuat bersama dengan komponen sesuai permintaan, tetapi hanya komponen yang dimuat, dan gaya diimpor secara keseluruhan di berkas masuk. Meskipun ini akan menyebabkan pengenalan beberapa gaya komponen yang tidak perlu, mengingat sebagian besar komponen antd biasanya digunakan dalam proyek, hal itu tidak akan menyebabkan volume css paket yang sebenarnya meningkat banyak.

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

Tentu saja, ini adalah solusi sementara saya, dan saya berharap orang-orang besar dapat menjelaskan alasannya dan memberikan lebih banyak solusi.

Saya juga memiliki masalah ini, konflik berbagai gaya

Saya juga mengalami masalah ini, tolong bantu!

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

Saya mengalami masalah yang sama ketika saya memperkenalkan React.lazy . Sayangnya, saya mulai membagi kode pada tingkat tinggi pada basis kode yang besar dan masih belum dapat melacak impor mana yang urutannya salah.

Saya mengalami masalah yang sama. Akan dengan senang hati menghargai bantuan. Mulai mengalami masalah ini ketika ditambahkan next-antd-aza-less - https://www.npmjs.com/package/next-antd-aza-less .

Setelah melihat kode umi , itu akan berfungsi untuk menambahkan plugin FilterCSSConflictingWarning ke konfigurasi webpack Anda.

@lonsdale8734 Saya telah menambahkan plugin ini, jika versi terbaru masih bermasalah, silakan buat repo. Kami akan melihatnya.

Karena gaya komponen antd bersifat independen dan tidak terkait dengan urutan file gaya. Peringatan ini dapat diabaikan atau menggunakan filter untuk melewati di konsol.
Tetapi jika ingin menyelesaikan ini, Anda dapat merujuk saran mini-css-extract-plugin untuk menjaga urutan impor komponen seperti:

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

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

Ke

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

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

CATATAN LAGI:aman untuk mengimpor komponen antd tanpa urutan yang sama karena gayanya independen.

@zombieJ
Apakah lebih baik menanganinya di babel-plugin-import ?
Mengubah urutan dalam proyek biz terlalu memakan waktu.

@jaggerwang
Alasan lain untuk bug ini adalah mengimpor Komponen dari lib dir.

misalnya:

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

...

Dan proyek Anda menggunakan babel-plugin-import dengan lebih sedikit.

Hari ini, kami menemukan bahwa kasing dapat membuat peringatan mini-css-extract-plugin

Saya menggunakan customize-cra dengan antd, dan mendapatkan masalah yang sama, ini kode saya, cukup sederhana, dan saya mendapatkan kesalahan ini

const addMyPlugin = konfigurasi => {
...
};
modul.ekspor = menimpa(
tambahkanPluginSaya,
fixBabelImports("impor", {
libraryName: "antd",
perpustakaanDirektori: "es",
gaya: benar
}),
addLessLoader({
javascriptDiaktifkan: benar,
modifikasiVars: {
"@warna-primer": "#0A4080"
}
})
);

apakah ada solusi untuk itu?

Senang melihat bahwa setengah dari orang-orang di sini merespons dalam bahasa Cina (atau apa pun itu). Lain kali saya membuka tiket itu akan dalam bahasa Italia.

@AmazingTurtle saya mengerti tapi ya um jika Anda seorang pengembang dan belum pernah mendengar tentang Google Terjemahan Anda dalam masalah ha ha. Tidak semua orang berbicara bahasa Inggris. Bahkan PALING tidak mereka berbicara ... tunggu saja ... Cina (Mandarin).

@blujedis Saya menggunakan fitur terjemahan yang disematkan pada browser (klik kanan -> terjemahkan). Karena github.com telah mengatur bahasanya ke EN, itu memaksa EN sebagai bahasa sumber, sehingga tidak menerjemahkan bahasa Cina. Saya hanya tidak suka menyalin setiap posting dan menerjemahkannya secara manual karena penerjemah tidak mampu menerjemahkan beberapa bahasa sekaligus.

Bagi mereka yang menggunakan react-app-rewired atau analog dan tetap menggunakan cara disable mini-css-extract-plugin warning :

1. pastikan Anda memiliki "mini-css-extract-plugin": "^0.8.0" , jika tidak tambahkan (ada tanda tambahan dalam versi ini untuk melewati peringatan pemesanan)
2. tambahkan ini ~(retas mengerikan)~ ke 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
    }
  }

Karena saya mendapat masalah konflik antara Menu, Dropdown, Tooltip, Jadi saya memindahkan Dropdown ke luar. Ini bekerja sekarang

Dari

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

Ke

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

Apakah solusinya semudah menyortir impor semua komponen antd?
Bisakah kita membuka kembali ini?!

@zombieJ solusi Anda tidak selalu berhasil. Saya telah mengatur setiap impor dalam proyek kecil saya agar konsisten dan saya masih melihat masalah ini.

Silahkan buka kembali...

Saya melihat masalah yang sama dalam proyek Gastby, jadi ini bukan hanya Buat Aplikasi Bereaksi.

Saya setuju dengan @ChuckJonas , silakan buka kembali.

@zombieJ ,

Saya tidak berpikir masalahnya dapat diselesaikan hanya dengan mengurutkan impor menurut abjad. Saya sudah melakukan ini (melalui Prettier/ESLint):

Dan saya benar-benar mendapatkan halaman peringatan ini.

Saya menginstal webpack-filter-warnings-plugin untuk menyembunyikan kesalahan.

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

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

menyembunyikan peringatan bukanlah ide yang baik jika Anda ingin aplikasi Anda benar-benar terlihat 100% setiap saat. Satu-satunya solusi nyata yang saya temukan adalah mengimpor seluruh stylesheet, alih-alih menggunakan plugin babel.

mendapat yang berikut

apakah Anda menemukan solusinya?

Saya dapat melewati kesalahan ini dengan malas memuat komponen antd dalam aplikasi saya, Contoh di NextJS adalah memuat dengan cara ini

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

Di sini saya dapat menggunakan Menu dan Item Menu dari antd di tempat atau sintaks import {Menu} from 'antd' mana MenuItem adalah Menu.Item

Sejauh ini tidak ada masalah dengan urutan yang bertentangan antar gaya"
Ini berlaku jika Anda menggunakan lebih sedikit dan babel-import-plugin

Karena saya mendapat masalah konflik antara Menu, Dropdown, Tooltip, Jadi saya memindahkan Dropdown ke luar. Ini bekerja sekarang

Dari

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

Ke

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

Ini berfungsi untuk saya dengan mengimpor semua Button secara terpisah dari antd/lib/button seperti:

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

Terima kasih @phattranky

Jika terkait dengan Antd maka lakukan 2 hal ini -

• Jika Anda mengimpor gaya dengan menentukan opsi style dari babel-plugin-import, ubah dari 'css' menjadi true , yang akan mengimpor versi less dari semut

• Jika Anda mengimpor gaya dari 'antd/dist/antd.css' , ubah menjadi antd/dist/antd.less .

Bagian next.config.js dapat diperiksa dari nextjs-css-less-antd

Karena saya mendapat masalah konflik antara Menu, Dropdown, Tooltip, Jadi saya memindahkan Dropdown ke luar. Ini bekerja sekarang

Dari

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

Ke

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

Terima kasih! Bekerja untuk saya. Anda harus mengimpor komponen yang bertentangan secara terpisah. Bagi saya, 3 komponen di bawah ini bertentangan, jadi saya mengimpornya seperti ini:

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

Ya, saya tahu itu terlihat jelek dan bodoh, tapi itu satu-satunya cara untuk menyelesaikan masalah.

Karena saya mendapat masalah konflik antara Menu, Dropdown, Tooltip, Jadi saya memindahkan Dropdown ke luar. Ini bekerja sekarang
Dari

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

Ke

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

Terima kasih! Bekerja untuk saya. Anda harus mengimpor komponen yang bertentangan secara terpisah. Bagi saya, 3 komponen di bawah ini bertentangan, jadi saya mengimpornya seperti ini:

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

Ya, saya tahu itu terlihat jelek dan bodoh, tapi itu satu-satunya cara untuk menyelesaikan masalah.

Ya, peringatan itu hilang saat mengimpor Modal secara terpisah.

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