Apakah maksud Anda aturan CSS seperti ini?

html,
body {
  ...
}

Ya.

Tidak mungkin untuk tidak mengimpor aturan CSS itu sekarang.

https://github.com/ant-design/ant-design/issues/1966#issuecomment -247946641

Anda harus mengganti gaya global ini sekarang.

Atau Anda menghapus opsi style dari babel-plugin-import , mengimpor lebih sedikit file secara mandiri.

<strong i="12">@import</strong> "~antd/lib/style/themes/default.less";
<strong i="13">@import</strong> "~antd/lib/button/style/index.less";

Itu desain yang mengerikan sekalipun.

Masalah ini membuat perpustakaan ini sangat sulit untuk dikerjakan. Terutama memiliki properti global pada body dll. Saya pikir masalah ini harus dibuat lebih jelas kecuali jika Anda memiliki rencana untuk mengubahnya.

@Forestdev @peitalin ini adalah masalah yang diketahui, tetapi kami tidak punya cukup waktu untuk menyelesaikan masalah ini.

Tapi kita bisa terus berdiskusi di sini.

Jika kami dapat mengimpor perubahan yang melanggar, kami dapat menyelesaikan masalah ini. Seperti, pindahkan gaya dalam pengaturan ulang ke gaya komponen:

Bergerak:

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
}

Ke:

.ant-btn,
.ant-btn * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
}

Dan untuk kompatibilitas mundur, kami dapat menyediakan lembar gaya reset mandiri.

import 'antd/styles/reset.less'

apakah ada pembaruan tentang ini?

Kita bisa berdiskusi, tapi kita tidak punya waktu untuk menerapkan solusi apapun (jika kita bisa menemukan) sekarang.

Saya pikir ini adalah masalah kritis karena tidak banyak orang yang mampu mengimpor css global dan mengganti gaya yang ada

Itu benar-benar menjengkelkan yang menghentikan saya untuk mengadopsi Antd

Ini akan memblokir banyak pengembang#

karena semut tidak bisa bootstarp yang kompatibel, saya harus menyerah menggunakan semut.

bagaimana kalau mengeluarkan lebih sedikit file ke perpustakaan independen.

Omong-omong. aku sedang mencoba

Diskusi terkait: https://github.com/palantir/blueprint/issues/244

Hai teman-teman, saya sedang mengerjakan [email protected] dan mencoba mencari solusi untuk masalah gaya global.

Saya mencoba solusi import 'antd/styles/reset.less' dari @benjycui. Ternyata itu akan menjadi perubahan jeda dan membuat gaya impor jauh lebih rumit, terutama dengan babel-plugin-import. Jadi saya putuskan untuk lulus.

Kemudian saya menemukan poin utama dari masalah ini adalah tentang babel-plugin-import yang akan mengubah kode menjadi:

import Button from 'antd/lib/button';
import 'antd/lib/button/style/css';   // It will import reset styles and hard to override it because it was imported lately!!!

Solusi yang lebih baik untuk ini adalah tidak menggunakan opsi style dari babel-plugin-import dan gaya impor secara manual.

<strong i="17">@import</strong> '~antd/dist/antd.css';

// your global styles
body {
 ...
}

Jadi saya menyerahkan seluruh ide reset.less dan hanya menghapus kode reset yang mengganggu seperti: https://github.com/ant-design/ant-design/blob/afce275d25abe958b32cf15ba1f16c49f4fca900/components/style/core/base. kurang#L33 -L50

Saya juga menambahkan kode tipografi yang lebih baik dari bootstrap@v4 untuk menyelesaikan #6162

Semua pembaruan ada di #7682 sekarang dan akan segera digabungkan ke antd-3.0.

Ubah saja import 'antd/styles/reset.less menjadi import 'antd/styles/typography.less .

Saat pengguna meningkatkan dari [email protected] , import 'antd/styles/typography.less adalah adaptor untuk memudahkan migrasi.

Bagi pengguna yang baru mengenal antd, import 'antd/styles/typography.less adalah fitur opsional, sehingga mereka tidak perlu khawatir akan konflik.

Menambahkan antd/style/v2-compatible-reset.less .

+// For 2.x reset compatibility
+//   import 'antd/style/v2-compatible-reset';
+//     or
+//   <strong i="7">@import</strong> '~antd/style/v2-compatible-reset.css';

Adakah yang bisa menjelaskan beberapa langkah untuk memperbaiki masalah ini karena masalah ini sudah ditutup sekarang. Saya mencoba menggunakan antd dalam skrip konten ekstensi chrome dan itu mengacaukan semua halaman web.

@abhinavzspace Anda dapat menginstal antd@next untuk mendapatkan 3.0 Alpha build, yang menyelesaikan masalah ini tetapi tidak sepenuhnya.

Setelah banyak waktu saya menemukan beberapa solusi yang bekerja untuk saya. Mungkin itu berhasil untuk orang lain ...

Masalahnya adalah setiap komponen mengimpor sekelompok pengaturan ulang dan penggantian global (termasuk normalize.css) dari style/core/base.less , jika gaya ini memuat asinkron, mereka menimpa gaya halaman yang mengacaukan segalanya.

Menemukan bahwa menambahkan

import 'antd/lib/style/index.css'
// import 'antd/lib/style'  if you are using LESS

ke titik masuk proyek saya membuat webpack mengemas pengaturan ulang sebelum semua gaya lainnya, jadi ketika komponen async dimuat, komponen itu tidak mengimpor/menyertakan pengaturan ulang lagi.

apakah itu harus memberikan index.less lain untuk setiap komponen. index.less dapat dikontrol. dan juga hampir semua file lebih sedikit hapus @import directive atau cukup gunakan @import (referensi)

Apakah itu akan menjadi solusi yang baik?

ck ck ck. Masalah ini harus "Terbuka" sehingga semua orang tahu bahwa ini adalah masalah yang diketahui. Baru saja membuang semut di tengah proyek hanya untuk ini.

Ini adalah gelandangan nyata. Ant direkomendasikan kepada saya dan terlihat menjanjikan, tetapi perilaku ini mengacaukan desain kami yang ada dan membuat Ant merasa seperti Bootstrap. 😦.

Semut harus berpendirian tentang penampilan komponennya sendiri, tetapi bukan penampilan situs pengguna.

Masalah ini menyiratkan bahwa Ant 3 memperbaiki masalah ini. Tapi saya masih melihat banyak gaya global. Apa yang harus dilakukan pengguna untuk menghindari penambahan gaya global tersebut?

@openjck Saya menemukan bahwa ini tampaknya mengatur ulang gaya global (saya menambahkannya ke titik masuk Bereaksi saya):

import 'antd/lib/style/v2-compatible-reset';

Menemukannya terkubur di changelog mereka

Saya menemukan catatan itu, tetapi tidak berhasil untuk saya. Dokumentasinya cukup jarang. Impor terkait gaya apa lagi yang Anda lakukan, dan dalam urutan apa?

Sejauh gaya Ant, itu saja. Saya juga menggunakan pengaturan style: true , yang mungkin penting.

Perubahan gaya global seperti apa yang Anda lihat?

Saya menggunakan React dengan webpacker dan Rails dan memiliki masalah yang sama sebelumnya. Untuk mengatasinya, dalam tampilan HTML saya, saya menambahkan tag tautan stylesheet dari nama file CSS yang ada di bawah stylesheet_pack_tag, dan itu berfungsi.
= javascript_pack_tag 'root'
= stylesheet_pack_tag 'root'
= stylesheet_link_tag 'application'

@jhdavids8 , di mana Anda menyetel style: true ? Saya tidak yakin itu berlaku untuk pengaturan saya.

Saya menggunakan create-react-app. Dokumentasi merekomendasikan untuk menambahkan ini ke salah satu lembar gaya utama:

<strong i="10">@import</strong> '~antd/dist/antd.css';

...tetapi hal itu memperkenalkan perubahan gaya global, seperti font-family dan line-height yang diatur pada body.

Saya hanya menggunakan babel-plugin-import seperti yang didokumentasikan di sini untuk mengimpor gaya sesuai permintaan. Opsi style: true adalah cara untuk mengimpor file sumber Sass (lihat ini ), yang kami butuhkan karena kami juga sangat menyesuaikan tema Ant

Tim kami baru saja meninggalkan antd karena gaya global . Saya tahu Anda sibuk tetapi jika Anda dapat menemukan cara untuk menyelesaikan ini, itu akan meningkatkan jangkauan antd secara radikal.

Silakan buka kembali masalah ini. Saya masih melihat perilaku ini dan begitu juga orang lain.

+1

+1

Css global yang saya tambahkan sendiri akan dikemas di tengah /lib/style/index.css setiap kali, saya hanya ingin menghapus antd
Tambahkan tampilan yang benar di IE 10-.
Kembali
html,
tubuh {
lebar: 100%;
tinggi: 100%;
}
Mengapa begitu sulit... Mengapa css global kustom tidak dapat ditempatkan di akhir /lib/style/index.css

+1

+1

Saya menemukan bahwa saya dapat menyelesaikan masalah dengan cara yang dijelaskan @afc163 .

Biasanya Anda akan melakukan import 'antd/lib/tabs/style/css'; , yang menunjuk ke file hanya dengan ini di dalamnya:

'use strict';
require('../../style/index.css');
require('./index.css');

Saya hanya ingin mengimpor CSS Tab, jadi saya menambahkan ini ke file komponen saya:

import 'antd/lib/tabs/style/index.css';

Dan tampaknya menata komponen Tab saya dengan tepat tanpa memengaruhi bagian halaman lainnya.

Namun, berhati-hatilah, karena gaya pertama ada karena suatu alasan - mungkin beberapa komponen antd lebih bergantung padanya daripada yang lain dan ini mungkin tidak berfungsi di semua kasus.

_Jika Anda belum melakukannya, pastikan untuk menghapus properti style dari plugin .babelrc Anda:
[ "import", { "libraryName": "antd" } ] _

Harapan yang membantu seseorang!

Ini benar-benar gila.... Pustaka komponen "modular", yang mengganggu gaya global. Saya tidak tahu mengapa perpustakaan ini sangat dihargai dengan itu membuat hal mendasar menjadi salah. Belum lagi mereka telah menutup tiket ini seolah-olah masalahnya sudah teratasi.

@strongui babel-plugin-import tidak berfungsi untuk Anda?

@abenhamdine Tidak, tidak. Dan saya tidak sendirian menilai dari komentar di atas.

Menggunakan versi terbaru dari library , saya masih mengalami masalah ini.

Apakah ada yang menemukan perbaikan (idealnya bukan reset)?

Saya telah berhasil mengimpor CSS yang tepat untuk komponen yang lebih kecil yang saya butuhkan

import 'antd/lib/checkbox/style/index.css'

Tapi sekarang saya mencoba mengimplementasikan tabel. Tabel bergantung pada banyak gaya, jadi saya harus mengimpor semua berbagai lembar CSS secara terpisah, yang tidak masalah. _Kecuali_ bahwa untuk fitur penyortiran saya memerlukan icon CSS, yang tidak ada dalam antd/lib/icon . Alih-alih, saya harus mengimpor lembar gaya utama karena ikon css hanya mengarahkan ulang ke sana.

import 'antd/lib/style/index.css'

Ini adalah file yang memengaruhi aplikasi saya lainnya ️

Paling tidak, bisakah Anda membuatnya sehingga tidak ada lembar CSS yang dialihkan ke yang utama? (Seperti icon yang saya butuhkan untuk penyortiran tabel?)

Juga, @ afc163 tolong buka kembali masalah ini, belum terpecahkan.

Baca saja utasnya dan lihat tag "WON'T FIX". Ini adalah bug P0 yang memblokir setiap aplikasi besar, komponen tersemat yang memilih Ant.D untuk menjadi lib komponennya. Tag harus 'HATI BREAKING'.

@afc163 mengapa ini ditandai sebagai tidak akan diperbaiki?? Inti dari filosofi reaksi dan desain modular adalah agar komponen TIDAK bercampur dengan komponen lain. Ini sama sekali tidak masuk akal. Saya telah menghabiskan beberapa waktu dan mengekstrak css untuk pemilihan pohon dan dapat membuatnya berfungsi tanpa memengaruhi hal lain, jadi saya tahu itu mungkin.

+1 untuk membuka kembali masalah ini. Mencoba mentransisikan aplikasi kami dari Material-UI ke AntD dan ini adalah penghalang utama untuk masuk.

+1 untuk membuka kembali. babel-plugin-import tidak bekerja untuk saya, mencoba semua tutorial dan instruksi. Tidak dapat mengubah font global untuk aplikasi saya

Ada masalah terkait di blueprintjs palantir/blueprint#244 .

Satu saran adalah menggunakan plugin postcss yang disebut: css-byebye
https://github.com/AoDev/css-byebye

Ini dapat membantu sebagai solusi sementara.

Perpustakaan yang bagus tetapi cara yang mengerikan untuk memperlakukan penggunanya. Mengapa font default harus diubah? Dan mengapa tidak ada cara untuk mengatur ulang font dan gaya?

Hal ini membuat kami - dan banyak lainnya menilai dari membaca komentar - dari menggunakan perpustakaan ini.

Saya tidak tahu apakah ini masalah bahasa/budaya, tetapi pengembang perpustakaan ini - perhatikan: Apa gunanya membuat perpustakaan yang tidak ingin digunakan siapa pun? Mengapa Anda mempersulit sesama pengembang untuk menggunakan perpustakaan Anda?

Apa gunanya membuat perpustakaan yang tidak ingin digunakan siapa pun? Mengapa Anda mempersulit sesama pengembang untuk menggunakan perpustakaan Anda?

Harap tetap moderat.
Banyak developer dan startup yang menggunakan atau ingin menggunakan library ini.

Perpustakaan ini open-source dan gratis. Jika Anda tidak ingin menggunakannya, jangan gunakan itu.
Jika Anda ingin memodifikasinya, Anda dapat membayarnya untuk digunakan sendiri atau mengirimkan PR, pengelola ant-design terbuka untuk kontribusi.

Jadi tidak perlu bertele-tele di sini.

Masalah ini juga merupakan pemecah kesepakatan bagi tim saya.
Kami menyukai proyek ini, dan semua pekerjaan yang telah dilakukan, tetapi masalah tunggal ini mencegah kami untuk menggunakannya.

Itu sebabnya saya masih mengikuti masalah ini dengan harapan dibuka kembali dan diperbaiki dalam waktu dekat.

Oh saya sangat moderat. Dan saya tidak mengoceh di sini.

Saya mengingatkan Anda bahwa perpustakaan Anda - meskipun bagus - tidak boleh memiliki efek samping yang tidak perlu. Bayangkan jika saya menggunakan MomentJS (misalnya) dan mulai menampilkan tanggal dan waktu di Klingon!

"Pergi garpu sendiri" juga bukan jawabannya. Faktanya, itulah keadaan yang menyedihkan dan menyedihkan dari banyak proyek sumber terbuka.

Kami sedang membangun sistem yang kompleks sendiri - kami bukan pemula di sini. Kami ingin menggunakan perpustakaan dan melanjutkan hidup kami. Setidaknya harus ada cara untuk meminta perpustakaan tidak mengubah font default atau ukuran font. Itu saja yang saya - dan mungkin orang lain di sini - tanyakan.

Anda dapat memilih untuk tidak peka terhadap nada dan mengabaikan kekhawatiran ini - berkonsentrasi daripada memilih kata-kata saya - ATAU Anda dapat memilih untuk memahami apa yang dikatakan orang-orang di sini dan menyediakan cara bagi mereka untuk menggunakan perpustakaan Anda tanpa efek samping.

Semoga kekuatan menyertai Anda saat Anda panjang umur dan makmur.

Sangat setuju dengan @kotpal . Apa yang mengherankan saya bahwa diskusi ini bukan tentang "dapatkah Anda menambahkan fitur ini" atau "bukankah lebih baik jika ...", ini benar-benar mencoba meyakinkan penulis bahwa suatu komponen tidak boleh mengacaukan global negara. Ini benar-benar menunjukkan konsep inti ReactJS dan desain modular apa pun.

Anda JANGAN main-main dengan GLOBAL apa pun, kecuali jika Anda menyediakan tema global atau sesuatu.

Saya mengerti apa yang dikatakan @abenhamdine . Tapi saya juga setuju dengan @strongui .

Mungkin Ant seharusnya menjadi keseluruhan pengalaman. Namun dalam praktiknya, banyak orang masih perlu bekerja dengan kode lama yang tidak dapat diubah. Dan jika proyek ini bentrok dengan kode lama itu, kami kehilangan semua manfaat menggunakan React (atau kerangka kerja lain yang serupa) sejak awal.

Jika masalah ini menghentikan begitu banyak orang untuk sepenuhnya mengadopsi proyek, mungkin kita dapat bekerja sama dan memberikan hadiah untuk itu atau sesuatu?

Saya tahu bahwa saya tidak memiliki pengetahuan atau waktu untuk memperbaiki masalah ini sendiri, jadi apa yang diperlukan kontributor untuk memperbaikinya? (dan ya itu adalah masalah dan bukan fitur)

Saya telah berhasil dengan mengganti css global yang disediakan oleh antd dan menggunakan proyek-proyek seperti jsx yang ditata.
Anda dapat melihat situs yang digunakan di sini! Ps: sedang dalam proses.

Saya baru saja menemukan diri saya dalam situasi yang sama, dan telah mencapai kesuksesan moderat menggunakan pendekatan yang sama yang dijelaskan oleh @inverts dan @corinnebrady (https://github.com/ant-design/ant-design/issues/4331#issuecomment -361421192 dan https://github.com/ant-design/ant-design/issues/4331#issuecomment-365481037). Jadi, beberapa komponen saya terlihat seperti ini:

// ...
import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/index.css'

import AutoComplete from 'antd/lib/auto-complete'
import 'antd/lib/auto-complete/style/index.css'

import Form from 'antd/lib/form'
import 'antd/lib/form/style/index.css'
import 'antd/lib/select/style/index.css'

import Button from 'antd/lib/button'
import 'antd/lib/button/style/index.css'
// ... etc

Ini berfungsi dengan baik dengan sebagian besar komponen antd, tetapi ada yang lain yang tidak memiliki file css khusus yang terkait dengannya, dan gayanya hanya dapat ditemukan di global. Ini adalah kasus untuk komponen icon , untuk membuatnya berfungsi, saya harus menyalin semua gaya terkait ikon secara manual dari file global ke lembar gaya saya sendiri. Pengelola: apakah Anda akan menerima PR untuk menyertakan antd/lib/icon/style/index.css ?

Sepertinya Anda juga dapat menyertakan file yang lebih sedikit, misalnya import 'antd/lib/spin/style/index.less'

Adakah rencana untuk menyelesaikan masalah ini secara resmi?

Masih menjadi masalah, tetapi saya mencoba memperbaikinya dengan impor yang direferensikan seperti yang dijelaskan @reyronald .

Saya juga terjebak dengan masalah gaya Icon .

@reyronald bisakah kamu membuat PR?

Orang yang menderita ini mungkin ingin mencoba garpu saya dengan menambahkan paket langsung dari repositori

yarn add github:serguzest/ant-design#3.4.1-NoCssPollution

atau

npm install github:serguzest/ant-design#3.4.1-NoCssPollution

Saya hanya mengesampingkan base.less dan membangunnya tanpa modifikasi lain. Ini berfungsi dalam kasus saya, saya tidak menggunakan banyak komponen darinya. Ini mungkin akan merusak tampilan beberapa komponen terutama jika Anda belum memiliki lembar gaya reset waras di proyek Anda. #4546

Hai @ afc163 Saya juga ingin masuk ke sini dan menambahkan suara tambahan untuk memperbaiki masalah ini. Kami membangun aplikasi besar dengan banyak target, dan beberapa target kami dimuat di situs pihak ke-3. antd mengganggu CSS global merupakan masalah bagi kami karena kami akhirnya menghapus pengaturan ulang CSS dan font untuk situs pihak ketiga tersebut. Kami menyukai perpustakaan dan ingin berkontribusi untuk perbaikan jika pengelola bersedia mengarahkan kami ke suatu arah. Harap buka kembali atau arahkan percakapan ke masalah terbuka lainnya! Terima kasih

Jadi kami dapat menjalankan ini (setidaknya sejauh ini) dengan menggunakan beberapa manipulasi webpack untuk memuat file alternatif yang lebih sedikit:

new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/styles.less') ),

Di mana file src/style.less memuat file yang sama dengan file index.less , tetapi memuatnya dalam lingkup pemilih tingkat atas:

#root { <strong i="11">@import</strong> '~antd/lib/style/core/index.less'; <strong i="12">@import</strong> '~antd/lib/style/themes/default.less'; }

Hasilnya adalah semua gaya "global" diterapkan dengan cakupan #root :

`#artikel akar,

akar ke samping,

dialog akar,

figcaption akar,

sosok akar,

catatan kaki akar,

tajuk akar,

root hgrup,

akar utama,

navigasi akar,

bagian akar {

tampilan: blok;
}
`
dll...

Semoga ini bermanfaat bagi seseorang.

Orang-orang, itu benar-benar menjengkelkan. Perilaku penataan gaya ini tidak Anda harapkan dari perpustakaan UI kelas dunia.

Setidaknya sebutkan tentang reset global di dokumen, agar orang tidak bingung. Atau mungkin beberapa panduan "Mengintegrasikan dalam situs web lama" dengan resep tentang mengimpor gaya dan ikon individual akan membantu

Saya pikir pengelola telah berhenti berlangganan dari masalah ini setelah ditutup karena mereka tidak berpartisipasi dalam diskusi sejak itu, jadi kami mungkin tidak akan menerima dukungan resmi apa pun tentang ini kecuali kami membuka masalah baru, ping mereka secara langsung atau membuka PR.

Saya akhirnya menemukan cara untuk menghindari masalah ini dengan membuat file CSS baru berdasarkan antd.css asli, dengan setiap aturan diawali dengan kelas khusus. Solusi saya menggunakan plugin PostCSS, Gulp dan postcss-prefixwrap :

https://Gist.github.com/sbusch/a90eafaf5a5b61c6d6172da6ff76ddaa

Ini jauh dari sempurna, tetapi bekerja dengan sangat baik. Setidaknya untuk kebutuhan saya ;-)

Intisari juga berisi versi siap pakai dari antd CSS, diawali dengan .antd-ns ("ns" sebagai singkatan untuk "namespace")

Catatan:
Persyaratan penting bagi saya adalah bahwa itu otomatis, sehingga CSS awalan dapat dengan mudah diproduksi untuk setiap rilis semut baru.

• itu dimaksudkan hanya sebagai alat untuk membuat CSS awalan; sehingga bisa dijalankan dari folder berbeda yang terpisah dari proyek Anda. Tidak perlu proyek berbasis semut Anda untuk menyertakan PostCSS atau Gulp! CSS yang dihasilkan hanya perlu ditempatkan di folder CSS statis proyek Anda (yang dilakukan oleh Gulp jika dikonfigurasi sesuai).
• postcss-prefixwrap harus setidaknya versi 1.3.0, yang menyertakan tambalan saya untuk mempertahankan animasi keyframe antd

Komentar / umpan balik selalu dihargai!

Terima kasih kepada @dbtedman karena memungkinkan ini dengan plugin postcss-prefixwrap PostCSS yang bagus .

Komentar / umpan balik dihargai!

Saya akhirnya menemukan cara untuk menghindari masalah ini dengan membuat file CSS baru berdasarkan antd.css asli, dengan setiap aturan diawali dengan kelas khusus.

Ini adalah IMHO solusi paling lurus.
Secara pribadi, saya tidak membutuhkannya saat ini, tetapi akan bermanfaat bagi semua orang jika seseorang akan mengirimkan PR untuk menambahkan variabel lebih sedikit nama kelas (misalnya .@{scope} ) sebelum setiap aturan css dalam file yang lebih sedikit.

Secara default, variabel ini akan kosong, untuk menghindari pemutusan perilaku saat ini.

Seseorang hanya perlu menyetel variabel dengan, misalnya, antd untuk mengisolasi gaya.

Saya pikir solusi ini akan dapat diterima oleh pengelola dan akan memungkinkan untuk maju.

Ini adalah solusi yang berhasil untuk saya. Saya membuat file styles.less

// Doing what antd/lib/style/core/index.less does
// but without loading "base" which overwrites global styles
<strong i="7">@import</strong> '~antd/lib/style/mixins/index.less';
<strong i="8">@import</strong> '~antd/lib/style/core/iconfont.less';
<strong i="9">@import</strong> '~antd/lib/style/core/motion.less';

<strong i="10">@import</strong> '~antd/lib/menu/style/index.less';
<strong i="11">@import</strong> '~antd/lib/dropdown/style/index.less';
<strong i="12">@import</strong> '~antd/lib/button/style/index.less';
<strong i="13">@import</strong> '~antd/lib/checkbox/style/index.less';
<strong i="14">@import</strong> '~antd/lib/grid/style/index.less';

Di .babelrc saya punya:

  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": false,
      }
    ]
  ]

untuk mengoptimalkan ukuran build JS seperti yang dijelaskan dalam https://ant.design/docs/react/getting-started#Import -on-Demand dan https://github.com/ant-design/babel-plugin-import

Untuk gaya yang disesuaikan, saya mengubah konfigurasi webpack saya menjadi:

module: {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader'
    }, {
      loader: 'css-loader'
    }, {
      loader: 'less-loader',
      options: {
        javascriptEnabled: true,
        modifyVars: {"primary-color": "#ed1c24"},
      }
    }]
  }]
}

seperti yang dijelaskan dalam https://ant.design/docs/react/customize-theme#1)-Using-theme-property-(recommended-way)

BTW: Saya mencoba menggunakan new webpack.IgnorePlugin(/style\/core\/base/) untuk mengabaikan file "base.less" ini dari pemrosesan tetapi saya tidak dapat membuatnya berfungsi. Saya tidak tahu mengapa. Hipotesis saya adalah karena diproses dengan KURANG, dan bukan dengan Webpack secara langsung.

Untuk apa nilainya, saya mengedit antd.css secara manual dan dapat menghapus gaya yang tidak diinginkan tanpa merusak komponen antd yang saya gunakan.

@paneq Saat ini saya sedang melakukan hal yang sama. Perhatikan bahwa opsi gaya babel-plugin-import juga dapat berupa fungsi, yang dapat memutuskan apakah suatu gaya harus disertakan. Aku hanya tidak membuatnya bekerja. Harus men-debug itu…
Mungkin saya juga salah mengartikan opsi itu?

@paneq Saya telah menyalin apa yang telah Anda lakukan dan tampaknya berhasil sejauh ini, tetapi saya belum mencoba cukup komponen untuk melihat mana yang memerlukan css global itu. Terima kasih

@vthinkxie

hai, mungkin untuk mencoba mencocokkan semua elemen, dimulai dengan .ant, dan menetapkan gaya untuk mereka

*[kelas^='semut-']{
ukuran kotak: kotak perbatasan;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // hapus warna sorot tap untuk safari seluler
}

Itu harus memiliki kompatibilitas lintas-browser dan tidak perlu waktu lama untuk diterapkan.

Jadi kami dapat menjalankan ini (setidaknya sejauh ini) dengan menggunakan beberapa manipulasi webpack untuk memuat file alternatif yang lebih sedikit:

new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/styles.less') ),

Di mana file src/style.less memuat file yang sama dengan file index.less , tetapi memuatnya dalam lingkup pemilih tingkat atas:

#root { <strong i="12">@import</strong> '~antd/lib/style/core/index.less'; <strong i="13">@import</strong> '~antd/lib/style/themes/default.less'; }

Hasilnya adalah semua gaya "global" diterapkan dengan cakupan #root :

Versi less-loader mana yang Anda gunakan? Sepertinya itu hanya berfungsi dengan 3.0.0? Melihat. misalnya https://github.com/webpack-contrib/less-loader/issues/184

Juga, versi antd mana yang Anda gunakan untuk solusi ini? Alasan saya bertanya adalah karena saya tidak berhasil bahkan dengan [email protected] dan [email protected] (webpack mengalami masalah penyelesaian setelah perubahan). ..

Saya tidak tahu apakah ini membantu siapa pun, tetapi yang berikut ini membantu saya mengimpor CSS hanya untuk komponen yang digunakan:

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

Saya tidak tahu apakah ini membantu siapa pun, tetapi yang berikut ini membantu saya mengimpor CSS hanya untuk komponen yang digunakan:

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

Ya, ini sepertinya berfungsi baik untuk banyak komponen. Jarak tempuh Anda mungkin berbeda -- setidaknya Select membutuhkan sedikit lebih dari sekadar gaya komponen itu sendiri. Ikon "hapus" dalam pilihan tidak akan ditampilkan sebaliknya; Saya tidak punya waktu untuk melacak masalah sepenuhnya, tetapi saya mungkin sesuatu yang kecil. Jadi, Anda mungkin perlu meniru beberapa gaya dari gaya utama di beberapa komponen.

Meskipun opsi ini tidak terlalu sempurna, opsi ini dapat bekerja dengan baik untuk banyak komponen. Gaya kustom berisiko rusak dengan pembaruan, tetapi Anda jelas dapat mengontrol kapan Anda ingin melakukan pembaruan.

Solusi terbaik yang saya temukan untuk organisasi kami adalah memasukkan seluruh lembar CSS dari antd, dengan gaya apa pun yang memengaruhi gaya bernama non antd dihapus. Jarak tempuh mungkin berbeda, dan jelas ada kelemahan dari gaya _setiap_ yang sekarang sedang diimpor. Tapi itu bekerja dengan baik dan saya belum melihat masalah apa pun setelah melakukannya selama sekitar dua bulan sekarang.

@jaleikas
Sudahkah Anda menemukan solusi untuk ini? Sejauh yang saya tahu, masalah dengan [email protected] masih belum terselesaikan dan oleh karena itu perbaikan yang disarankan dengan NormalModuleReplacementPlugin tidak berfungsi. Solusi itu sebenarnya tampak seperti yang terbaik karena hal-hal dapat diganti dan dicakup secara manual.
Saya mencoba hal yang sama seperti Anda, menurunkan versi yang lebih sedikit, tetapi kemudian webpack resolve tidak berfungsi.

Menggunakan [email protected] di sini.

Orang yang menderita ini mungkin ingin mencoba garpu saya dengan menambahkan paket langsung dari repositori

yarn add github:serguzest/ant-design#3.4.1-NoCssPollution

atau

npm install github:serguzest/ant-design#3.4.1-NoCssPollution

Saya baru saja membuang pangkalan dan membangunnya tanpa modifikasi lain. Ini berfungsi dalam kasus saya, saya tidak menggunakan banyak komponennya. Ini mungkin akan dipengaruhi oleh beberapa komponen, terutama jika Anda belum memiliki lembar gaya reset yang wajar dalam proyek Anda. #4546

ini bekerja untuk saya

Orang yang menderita ini mungkin ingin mencoba garpu saya dengan menambahkan paket langsung dari repositori

yarn add github:serguzest/ant-design#3.4.1-NoCssPollution

atau

npm install github:serguzest/ant-design#3.4.1-NoCssPollution

Saya hanya mengesampingkan base.less dan membangunnya tanpa modifikasi lain. Ini berfungsi dalam kasus saya, saya tidak menggunakan banyak komponen darinya. Ini mungkin akan merusak tampilan beberapa komponen terutama jika Anda belum memiliki lembar gaya reset waras di proyek Anda. #4546

Terima kasih atas solusi ini!

Sudahkah Anda menemukan solusi untuk ini? Sejauh yang saya tahu, masalah dengan [email protected] masih belum terselesaikan dan oleh karena itu perbaikan yang disarankan dengan NormalModuleReplacementPlugin tidak berfungsi. Solusi itu sebenarnya tampak seperti yang terbaik karena hal-hal dapat diganti dan dicakup secara manual.

Saya memilih untuk berhenti menggunakan antd, dan memutuskan untuk memilih beberapa komponen tanpa gaya (seperti rc-switch). Masalahnya adalah sebagian besar komponen "tanpa gaya" buruk/tidak didokumentasikan, dan beberapa di antaranya juga tampaknya berperilaku berbeda, jadi sebagian besar, saya menyerah dan mencari di tempat lain...

hai, mungkin untuk mencoba mencocokkan semua elemen, dimulai dengan .ant, dan menetapkan gaya untuk mereka

*[kelas^='semut-']{
ukuran kotak: kotak perbatasan;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // hapus warna sorot tap untuk safari seluler
}

Itu harus memiliki kompatibilitas lintas-browser dan tidak perlu waktu lama untuk diterapkan.

@tylik1 , terima kasih! saya hanya perlu memperbaiki font-family agar sesuai dengan sisa aplikasi elektron saya. ini benar-benar menyelamatkan saya.

Saya tidak tahu apakah ini membantu siapa pun, tetapi yang berikut ini membantu saya mengimpor CSS hanya untuk komponen yang digunakan:

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

itu bekerja untuk saya dengan yang berikut ini.

import Icon from 'antd/lib/icon';
import 'antd/lib/icon/style/index.css';

Sayangnya ini adalah penghenti pertunjukan. Saya juga tidak akan mengimplementasikan Antd meskipun pemilih tanggal adalah yang terbaik yang dapat saya temukan sejauh ini.

Kami sedang mencari perpustakaan komponen reaksi untuk perusahaan kami dan ini juga merupakan masalah pemblokiran bagi kami, dan kami mungkin tidak menggunakan semut karenanya.

Kami juga melihat reaksi MUI, yang memiliki opsi tema yang bagus, mungkin Anda dapat melihat bagaimana mereka melakukannya dan menerapkan sesuatu yang serupa.

Saya menggunakan https://www.npmjs.com/package/patch-package untuk berkomentar

// import 'normalize.css/normalize.css';

dari antd-mobile/es/style/index.js .
Tujuan saya adalah untuk mendapatkan next.js untuk membangun, jadi dalam kasus saya, saya hanya menyertakan tautan CND di header saya.

Saat itu tahun 2020, umat manusia padam, coronavirus, desain semut menambahkan gaya global ke proyek ...

Pelacakan di #9363