Ant-design: वैश्विक सीएसएस घटक सीएसएस आयात के साथ शामिल है

को निर्मित 21 दिस॰ 2016  ·  89टिप्पणियाँ  ·  स्रोत: ant-design/ant-design

इस महान पुस्तकालय के लिए धन्यवाद!

मैंने मॉड्यूलर सीएसएस आयात करने के लिए babel-plugin-import का उपयोग करने की कोशिश की, लेकिन एक व्यक्तिगत घटक के लिए सीएसएस के साथ, बहुत सारे वैश्विक सीएसएस आयात किए जा रहे हैं जो मेरी मौजूदा शैलियों में हस्तक्षेप करते हैं। क्या वैश्विक सीएसएस को शामिल किए बिना किसी व्यक्तिगत घटक के लिए सीएसएस आयात करना संभव है?

धन्यवाद!

🗣 Discussion 🙅🏻‍♀️ WON'T RESOLVE

सबसे उपयोगी टिप्पणी

हालांकि यह भयानक डिजाइन है।

सभी 89 टिप्पणियाँ

क्या आपका मतलब सीएसएस नियम इस तरह है?

html,
body {
  ...
}

हां।

अब उन CSS नियमों को आयात नहीं करना असंभव है।

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

आपको अब इन वैश्विक शैलियों को ओवरराइड करना होगा।


या आप style के विकल्प को छोड़ दें babel-plugin-import , कम फ़ाइलों को इंडेनपेंट रूप से आयात करें।

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

हालांकि यह भयानक डिजाइन है।

यह समस्या इस पुस्तकालय को काम करने में बहुत मुश्किल बनाती है। विशेष रूप से शरीर पर वैश्विक गुण आदि। मुझे लगता है कि इस मुद्दे को और अधिक स्पष्ट किया जाना चाहिए जब तक कि आपके पास इसे बदलने की योजना न हो।

@Forestdev @peitalin यह एक ज्ञात मुद्दा है, लेकिन हमारे पास इस मुद्दे को हल करने के लिए पर्याप्त समय नहीं है।

लेकिन हम यहां चर्चा जारी रख सकते हैं।

यदि हम ब्रेकिंग परिवर्तन आयात कर सकते हैं, तो हम इस समस्या को हल कर सकते हैं। जैसे, शैलियों को घटकों की शैलियों में रीसेट में ले जाना:

कदम:

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

प्रति:

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

और पश्चगामी संगतता के लिए, हम एक स्टैंडअलोन रीसेट स्टाइलशीट प्रदान कर सकते हैं।

import 'antd/styles/reset.less'

क्या इस पर कोई अपडेट है?

हम चर्चा कर सकते हैं, लेकिन हमारे पास अभी कोई समाधान (यदि हम पा सकते हैं) लागू करने का समय नहीं है।

मुझे लगता है कि यह एक महत्वपूर्ण मुद्दा है क्योंकि बहुत से लोग वैश्विक सीएसएस आयात करने और अपनी मौजूदा शैलियों को ओवरराइड करने का जोखिम नहीं उठा सकते हैं

यह वास्तव में कष्टप्रद है जिसने मुझे अंतडो को अपनाने से रोक दिया

यह कई डेवलपर्स को ब्लॉक कर देगा#

क्योंकि चींटी बूटस्ट्रैप के अनुकूल नहीं हो सकती, मुझे चींटी का उपयोग करना छोड़ना पड़ा।

कैसे एक स्वतंत्र पुस्तकालय में कम फ़ाइल से बाहर रखा जाए।

बीटीडब्ल्यू। मैं कोशिश कर रहा हूँ

संबंधित चर्चा: https://github.com/palantir/blueprint/issues/244

हे दोस्तों, मैं [email protected] पर काम कर रहा हूं और वैश्विक शैलियों के मुद्दे का समाधान खोजने का प्रयास कर रहा हूं।

मैंने @benjycui से import 'antd/styles/reset.less' के समाधान की कोशिश की। यह पता चला है कि यह एक ब्रेक परिवर्तन होगा और विशेष रूप से बेबेल-प्लगइन-आयात के साथ आयात शैलियों को और अधिक जटिल बना देगा। इसलिए मैं इसे पास करने का फैसला करता हूं।

तब मुझे लगता है कि इस मुद्दे का मुख्य बिंदु लगभग babel-plugin-import है जो कोड को इसमें बदल देगा:

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!!!

इसके लिए बेहतर समाधान style के babel-plugin-import विकल्प और मैन्युअल रूप से आयात शैली का उपयोग नहीं करना है।

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

// your global styles
body {
 ...
}

इसलिए मैं पूरे reset.less विचार को छोड़ देता हूं और केवल कष्टप्रद रीसेट कोड हटा देता हूं जैसे: https://github.com/ant-design/ant-design/blob/afce275d25abe958b32cf15ba1f16c49f4fca900/components/style/core/base। कम#L33 -L50

इसके अलावा मैंने #6162 . को हल करने के लिए बूटस्ट्रैप@v4 से बेहतर टाइपोग्राफी कोड जोड़ा

सभी अपडेट अभी #7682 में हैं और जल्द ही antd-3.0 में विलय कर दिए जाएंगे।

बस import 'antd/styles/reset.less को import 'antd/styles/typography.less में बदलें।

जब उपयोगकर्ता [email protected] से अपग्रेड करते हैं, तो import 'antd/styles/typography.less माइग्रेशन को आसान बनाने के लिए एक एडेप्टर होता है।

जब उपयोगकर्ता जो antd में नए हैं, import 'antd/styles/typography.less एक वैकल्पिक सुविधा है, इसलिए उन्हें विरोधों के बारे में चिंता करने की आवश्यकता नहीं है।

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';

क्या कोई कृपया इस समस्या को ठीक करने के लिए कुछ चरणों की व्याख्या कर सकता है क्योंकि यह समस्या अब बंद हो गई है। मैं क्रोम एक्सटेंशन की सामग्री स्क्रिप्ट में एएनटीडी का उपयोग करने की कोशिश कर रहा हूं और यह सभी वेबपृष्ठों के साथ गड़बड़ कर देता है।

@abhinavzspace आप 3.0 अल्फा बिल्ड प्राप्त करने के लिए antd@next इंस्टॉल कर सकते हैं, जो इस मुद्दे को कुछ हद तक हल करता है लेकिन पूरी तरह से नहीं।

बहुत समय बाद मुझे कुछ समाधान मिला जो मेरे लिए काम करता था। शायद यह दूसरों के लिए काम करता है ...

समस्या यह है कि प्रत्येक घटक style/core/base.less से वैश्विक रीसेट और ओवरराइड (सामान्यीकृत.css सहित) का एक गुच्छा आयात करता है, यदि यह शैलियाँ एसिंक्रोनस लोड करती हैं तो वे पृष्ठ शैलियों को ओवरराइड करती हैं जो सब कुछ गड़बड़ कर देती हैं।

पाया कि जोड़ना

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

मेरी परियोजना के प्रवेश बिंदु पर वेबपैक अन्य सभी शैलियों से पहले रीसेट को पैक करता है, इसलिए जब एक एसिंक घटक लोड होता है तो यह रीसेट को फिर से आयात/शामिल नहीं करता है।

क्या यह प्रत्येक घटक के लिए एक और index.less देना चाहिए। index.less नियंत्रित किया जा सकता है। और लगभग सभी कम फ़ाइल @import निर्देश को हटा दें या केवल @import (संदर्भ) का उपयोग करें

क्या यह एक अच्छा समाधान होगा?

टीएसके टीएसके टीएसके। यह मुद्दा "खुला" होना चाहिए ताकि सभी को पता चले कि यह एक ज्ञात मुद्दा है। बस इसी के लिए एक प्रोजेक्ट के बीच में antd खाई।

यह एक असली बमर है। मुझे चींटी की सिफारिश की गई थी और यह आशाजनक लग रहा है, लेकिन यह व्यवहार हमारे मौजूदा डिजाइन को गड़बड़ कर देता है और चींटी को बूटस्ट्रैप जैसा महसूस कराता है। मैं

चींटी को अपने स्वयं के घटकों की उपस्थिति के बारे में राय दी जानी चाहिए, लेकिन उपयोगकर्ता की साइट की उपस्थिति के बारे में नहीं।

इस समस्या का तात्पर्य है कि चींटी 3 इस समस्या को हल करती है। लेकिन मैं अभी भी बहुत सारी वैश्विक शैलियाँ देख रहा हूँ। उन वैश्विक शैलियों को जोड़ने से बचने के लिए उपयोगकर्ताओं को क्या करना चाहिए?

@openjck मैंने पाया कि यह वैश्विक शैलियों को रीसेट करने लगता है (मैंने इसे अपने रिएक्ट एंट्री पॉइंट में जोड़ा):

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

इसे उनके चैंज में दफन पाया गया

मुझे वह नोट मिला, लेकिन यह मेरे काम नहीं आया। प्रलेखन बहुत विरल है। आपने और कौन-से शैली-संबंधी आयात किए, और किस क्रम में?

जहाँ तक चींटी शैलियों की बात है, वह इसके बारे में है। मैं style: true सेटिंग का भी उपयोग कर रहा हूं, जो महत्वपूर्ण हो सकता है।

आप किस तरह की वैश्विक शैली में बदलाव देख रहे हैं?

मैं वेबपैकर और रेल के साथ प्रतिक्रिया का उपयोग कर रहा हूं और पहले भी यही समस्या है। इसे हल करने के लिए, मेरे एचटीएमएल व्यू में, मैं स्टाइलशीट_पैक_टैग के तहत मौजूदा सीएसएस फ़ाइल नाम का स्टाइलशीट लिंक टैग जोड़ता हूं, और यह काम करता है।
= javascript_pack_tag 'root'
= stylesheet_pack_tag 'root'
= stylesheet_link_tag 'application'

@ jhdavids8 , आप style: true कहाँ सेट कर रहे हैं? मुझे यकीन नहीं है कि यह मेरे सेटअप पर लागू होता है।

मैं क्रिएट-रिएक्शन-ऐप का उपयोग कर रहा हूं। दस्तावेज़ीकरण इसे मुख्य स्टाइलशीट में से एक में जोड़ने की अनुशंसा करता है:

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

...लेकिन ऐसा करने से वैश्विक शैली में बदलाव आते हैं, जैसे कि फ़ॉन्ट-फ़ैमिली और लाइन-ऊंचाई जो शरीर पर सेट होते हैं।

मैं मांग पर शैलियों को आयात करने के लिए यहां दस्तावेज के रूप में babel-plugin-import का उपयोग कर रहा हूं। style: true विकल्प Sass स्रोत फ़ाइलों को आयात करने का एक तरीका है ( इसे देखें), जिसकी हमें आवश्यकता है क्योंकि हम चींटी विषय को भारी रूप से अनुकूलित करते हैं

हमारी टीम ने वैश्विक शैलियों की वजह से antd को छोड़ दिया । मुझे पता है कि आप व्यस्त हैं लेकिन अगर आप इसे हल करने का कोई तरीका ढूंढ सकते हैं तो यह मौलिक रूप से और की पहुंच में वृद्धि करेगा।

कृपया इस मुद्दे को फिर से खोलें। मैं अभी भी यह व्यवहार देख रहा हूं और अन्य भी ऐसा ही देख रहे हैं।

+1

+1

मेरे द्वारा जोड़ा गया वैश्विक सीएसएस हर बार /lib/style/index.css के बीच में पैक किया जाएगा, मैं सिर्फ एंटडी को हटाना चाहता हूं
आईई 10- में सही डिस्प्ले जोड़ें।
पीछे
एचटीएमएल,
तन {
चौड़ाई: 100%;
ऊंचाई: 100%;
}
यह इतना कठिन क्यों है... कस्टम वैश्विक सीएसएस को /lib/style/index.css के अंत में क्यों नहीं रखा जा सकता

+1

+1

मैंने पाया कि मैं इस मुद्दे को @afc163 वर्णित तरीके से हल करने में सक्षम था।

आम तौर पर आप करेंगे import 'antd/lib/tabs/style/css'; , जो एक फ़ाइल को इंगित करता है जिसमें यह बस है:

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

मैं सिर्फ टैब सीएसएस आयात करना चाहता था, इसलिए मैंने इसे अपनी घटक फ़ाइल में जोड़ा:

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

और यह शेष पृष्ठ को प्रभावित किए बिना मेरे टैब घटक को उचित रूप से स्टाइल करने के लिए प्रकट हुआ।

हालांकि, सावधान रहें, क्योंकि पहली शैली एक कारण से है - शायद कुछ और घटक दूसरों की तुलना में इस पर अधिक निर्भर करते हैं और यह सभी मामलों में काम नहीं कर सकता है।

_यदि आप पहले से ऐसा नहीं कर रहे हैं, तो अपने .babelrc प्लगइन्स से style प्रॉपर्टी को निकालना सुनिश्चित करें:
[ "import", { "libraryName": "antd" } ] _

आशा है कि यह किसी की मदद करता है!

यह बिल्कुल पागल है .... एक "मॉड्यूलर" घटक पुस्तकालय, जो वैश्विक शैलियों में हस्तक्षेप करता है। मुझे नहीं पता कि इस पुस्तकालय को इतना अधिक क्यों माना जाता है कि यह इतनी मौलिक बात गलत है। यह उल्लेख करने के लिए नहीं कि उन्होंने इस टिकट को बंद कर दिया है जैसे कि समस्या हल हो गई है।

@ स्ट्रांगुई बेबेल -प्लगइन-आयात आपके लिए काम नहीं करता है?

@abenhamdine नहीं, यह नहीं है। और मैं उपरोक्त टिप्पणियों के आधार पर अकेला नहीं हूं।

पुस्तकालय के नवीनतम संस्करण का उपयोग करते हुए, मुझे अभी भी यह समस्या आ रही है।

क्या किसी को कोई फिक्स मिला (आदर्श रूप से रीसेट नहीं)?

मुझे आवश्यक छोटे घटकों के लिए सटीक सीएसएस आयात करने में सफलता मिली है

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

लेकिन अब मैं एक टेबल को लागू करने की कोशिश कर रहा हूँ। तालिका कई शैलियों पर निर्भर करती है, इसलिए मुझे सभी विभिन्न सीएसएस शीटों को अलग से आयात करना पड़ा, जो ठीक है। _Except_ कि छँटाई सुविधा के लिए मुझे icon CSS की आवश्यकता है, जो antd/lib/icon के भीतर मौजूद नहीं है। इसके बजाय मुझे मुख्य स्टाइल शीट आयात करना पड़ा क्योंकि आइकन सीएसएस बस इसे रीडायरेक्ट करता है।

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

यह वह फ़ाइल है जो मेरे बाकी ऐप को प्रभावित करती है ️

कम से कम, क्या आप इसे बना सकते हैं ताकि कोई सीएसएस शीट मुख्य पर रीडायरेक्ट न हो? ( icon की तरह जो मुझे टेबल सॉर्टिंग के लिए चाहिए?)

साथ ही, @afc163 कृपया इस मुद्दे को फिर से खोलें, इसे हल नहीं किया गया है।

बस थ्रेड को पढ़ें और "WON'T FIX" टैग देखें। यह एक P0 बग है जो हर बड़े एप्लिकेशन, एम्बेडेड घटक को ब्लॉक करता है जो Ant.D को उनका घटक lib बनने के लिए चुनता है। टैग 'हार्ट ब्रेकिंग' होना चाहिए।

@ afc163 दुनिया में इसे विल फिक्स के रूप में क्यों चिह्नित किया गया है ?? प्रतिक्रिया दर्शन और मॉड्यूलर डिजाइन का मूल घटकों के लिए अन्य घटकों में ब्लीड नहीं करना है। इसका बिल्कुल कोई मतलब नहीं है। मैंने कुछ समय बिताया है और पेड़ के चयन के लिए सीएसएस निकाला है और इसे किसी और चीज को प्रभावित किए बिना काम करने में सक्षम हूं, इसलिए मुझे पता है कि यह संभव है।

इस मुद्दे को फिर से खोलने के लिए +1। हमारे ऐप को मटेरियल-यूआई से एंटडी में बदलने की कोशिश कर रहा है और यह प्रवेश के लिए एक प्रमुख बाधा है।

+1 फिर से खोलने के लिए। babel-plugin-import मेरे लिए काम नहीं करता है, सभी टट्स और निर्देशों की कोशिश की। मेरे ऐप के लिए वैश्विक फ़ॉन्ट बदलने में सक्षम नहीं 😱

Blueprintjs palantir/blueprint#244 में संबंधित समस्या थी।

एक सुझाव पोस्टसीएसएस प्लगइन का उपयोग कर रहा है जिसे कहा जाता है: css-byeby
https://github.com/AoDev/css-byebye

यह एक अस्थायी समाधान के रूप में मदद कर सकता है।

महान पुस्तकालय लेकिन इसके उपयोगकर्ताओं के साथ व्यवहार करने का भयानक तरीका। डिफ़ॉल्ट फोंट को क्यों बदला जाना चाहिए? और फोंट और स्टाइल को रीसेट करने का कोई तरीका क्यों नहीं है?

यह हमें - और कई अन्य लोगों को टिप्पणियों को पढ़ने से - इस पुस्तकालय का उपयोग करने से रोक रहा है।

मुझे नहीं पता कि यह एक भाषा/सांस्कृतिक मुद्दा है, लेकिन इस पुस्तकालय के डेवलपर्स - ध्यान दें: पुस्तकालय बनाने का क्या मतलब है जिसका कोई भी उपयोग नहीं करना चाहता है? आप अपने साथी डेवलपर्स के लिए अपनी लाइब्रेरी का उपयोग करना कठिन क्यों बना रहे हैं?

एक पुस्तकालय बनाने का क्या मतलब है जिसका कोई उपयोग नहीं करना चाहता? आप अपने साथी डेवलपर्स के लिए अपनी लाइब्रेरी का उपयोग करना कठिन क्यों बना रहे हैं?

कृपया इसे मध्यम रखें।
कई डेवलपर और स्टार्टअप इस लाइब्रेरी का इस्तेमाल करते हैं या करना चाहते हैं।

यह लाइब्रेरी ओपन-सोर्स और फ्री है। यदि आप इसका उपयोग नहीं करना चाहते हैं, तो इसका उपयोग न करें।
यदि आप इसे संशोधित करना चाहते हैं, तो आप इसे अपने उपयोग के लिए फोर्क कर सकते हैं या पीआर जमा कर सकते हैं, एंटी-डिज़ाइन के रखरखाव योगदान के लिए खुले हैं।

इसलिए यहां शेखी बघारने की जरूरत नहीं है।

यह मुद्दा मेरी टीम के लिए भी एक डील-ब्रेकर है।
हम परियोजना, और किए गए सभी कार्यों से प्यार करते हैं, लेकिन यह एकमात्र मुद्दा हमें इसका उपयोग करने से रोकता है।

इसलिए मैं अभी भी इस मुद्दे का अनुसरण कर रहा हूं, इस उम्मीद में कि निकट भविष्य में इसे फिर से खोल दिया जाएगा।

ओह, मैं बहुत उदारवादी हूँ। और मैं यहाँ शेख़ी नहीं कर रहा हूँ।

मैं आपके ध्यान में ला रहा हूं कि आपकी लाइब्रेरी - भले ही वह बहुत अच्छी हो - पर अनावश्यक दुष्प्रभाव नहीं होने चाहिए। कल्पना कीजिए कि अगर मैं MomentJS (उदाहरण के लिए) का उपयोग करता हूं और यह क्लिंगन में दिनांक और समय प्रदर्शित करना शुरू कर देता है!

"जाओ कांटा खुद" भी जवाब नहीं है। वास्तव में यह कई ओपन-सोर्स प्रोजेक्ट्स की दुखद और दयनीय स्थिति है।

हम जटिल प्रणालियों का निर्माण स्वयं कर रहे हैं - हम यहां धोखेबाज़ नहीं हैं। हम एक पुस्तकालय का उपयोग करना चाहते हैं और अपने जीवन के साथ आगे बढ़ना चाहते हैं। कम से कम पुस्तकालय को डिफ़ॉल्ट फ़ॉन्ट या फ़ॉन्ट आकार को नहीं बदलने के लिए कहने का एक तरीका होना चाहिए। यही सब मैं - और यहां अन्य लोग - पूछ रहे हैं।

आप टोन-बधिर होना चुन सकते हैं और इन चिंताओं को अनदेखा कर सकते हैं - मेरे शब्दों की पसंद के बजाय ध्यान केंद्रित करना - या आप यह समझने का विकल्प चुन सकते हैं कि यहां के लोग क्या कह रहे हैं और बिना किसी दुष्प्रभाव के आपके पुस्तकालय का उपयोग करने का तरीका प्रदान कर सकते हैं।

जब तक आप दीर्घायु हों और समृद्ध हों, शक्ति आपके साथ रहे।

@kotpal के साथ और अधिक सहमत नहीं हो सका। मुझे आश्चर्य है कि यह चर्चा "क्या आप इस सुविधा को जोड़ सकते हैं" या "क्या यह अच्छा नहीं होगा ..." के बारे में नहीं है, यह सचमुच एक लेखक को समझाने की कोशिश कर रहा है कि एक घटक को वैश्विक के साथ खिलवाड़ नहीं करना चाहिए राज्य। यह सचमुच रिएक्टजेएस और किसी भी मॉड्यूलर डिजाइन की मूल अवधारणा को खाली कर देता है।

जब तक आप ग्लोबल थीम या कुछ और प्रदान नहीं कर रहे हैं, तब तक आप GLOBAL के साथ खिलवाड़ नहीं करते हैं।

मुझे वही मिलता है जो @abenhamdine कह रहा है। लेकिन मैं @strongui से भी सहमत हूं।

शायद चींटी को एक संपूर्ण अनुभव माना जाता है। लेकिन व्यवहार में बहुत से लोगों को अभी भी विरासत कोड के साथ काम करने की आवश्यकता है कि वे इसे बदल नहीं सकते हैं। और अगर यह प्रोजेक्ट उस पुराने कोड से टकराता है तो हम सबसे पहले रिएक्ट (या इसके जैसे किसी अन्य फ्रेमवर्क) का उपयोग करने के सभी लाभों को खो देते हैं।

अगर यह मुद्दा इतने सारे लोगों को पूरी तरह से परियोजना को अपनाने से रोक रहा है तो शायद हम एक साथ खींच सकते हैं और इस पर इनाम या कुछ और दे सकते हैं?

मुझे पता है कि मेरे पास इस मुद्दे को स्वयं ठीक करने के लिए ज्ञान या समय नहीं है, तो योगदानकर्ताओं को इसे ठीक करने में क्या लगेगा ? (और हाँ यह एक मुद्दा है और एक विशेषता नहीं है)

मुझे एएनटीडी द्वारा प्रदान की गई वैश्विक सीएसएस को ओवरराइड करने और स्टाइल जेएसएक्स जैसी परियोजनाओं का उपयोग करने में कुछ सफलता मिली है।
आप यहाँ तैनात साइट देख सकते हैं! पीएस: इसका काम प्रगति पर है।

मैंने खुद को उसी स्थिति में पाया है, और @inverts और @corinnebrady (https://github.com/ant-design/ant-design/issues/4331#issuecomment) द्वारा वर्णित समान दृष्टिकोण का उपयोग करके मध्यम सफलता प्राप्त कर रहा हूं -361421192 और https://github.com/ant-design/ant-design/issues/4331#issuecomment-365481037)। तो, मेरे कुछ घटक इस तरह दिखते हैं:

// ...
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

यह अधिकांश एंटडी घटकों के साथ कुछ हद तक ठीक काम करता है, लेकिन कुछ ऐसे भी हैं जिनके पास एक विशिष्ट सीएसएस फ़ाइल नहीं है, और इसकी शैलियों को केवल वैश्विक में ही पाया जा सकता है। icon घटक के लिए यह मामला है, उन्हें काम करने के लिए मुझे वैश्विक फ़ाइल से सभी आइकन संबंधित शैलियों को मैन्युअल रूप से अपनी स्टाइलशीट में कॉपी करना पड़ा। अनुरक्षक: क्या आप antd/lib/icon/style/index.css को शामिल करने के लिए किसी पीआर को स्वीकार करेंगे?

ऐसा लगता है कि आप अलग-अलग कम फ़ाइलें भी शामिल कर सकते हैं, जैसे import 'antd/lib/spin/style/index.less'

इस मुद्दे को आधिकारिक तौर पर हल करने की कोई योजना है?

अभी भी एक समस्या है, लेकिन मैं @reyronald जैसे संदर्भित आयातों को ठीक करने का प्रयास कर रहा हूं।

मैं भी Icon की शैली की समस्या से फंस गया हूं।

@reyronald क्या आप पीआर बना सकते हैं, कृपया?

जो लोग इससे पीड़ित हैं वे पैकेज को सीधे रिपॉजिटरी से जोड़कर मेरे कांटे को आजमा सकते हैं

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

या

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

मैंने केवल आधार रहित को खारिज किया और इसे बिना किसी अन्य संशोधन के बनाया। यह मेरे मामले में काम करता है, मैं इसके कई घटकों का उपयोग नहीं करता हूं। यह शायद कुछ घटकों के लुक को तोड़ देगा, खासकर यदि आपके पास अपने प्रोजेक्ट में पहले से ही समझदार रीसेट स्टाइलशीट नहीं है। #4546

अरे @ afc163 मैं भी यहां आना चाहता हूं और इस मुद्दे को ठीक करने के लिए अतिरिक्त आवाज जोड़ना चाहता हूं। हम कई लक्ष्यों के साथ एक बड़ा एप्लिकेशन बनाते हैं, और हमारे कुछ लक्ष्य तृतीय पक्ष साइटों पर लोड होते हैं। antd वैश्विक CSS में हस्तक्षेप करना हमारे लिए समस्याजनक है क्योंकि हम उन तृतीय पक्ष साइटों के लिए CSS रीसेट और फ़ॉन्ट को समाप्त कर देते हैं। हम पुस्तकालय से प्यार करते हैं और अगर अनुरक्षक हमें एक दिशा में इंगित करने के लिए तैयार थे, तो इसे ठीक करने में योगदान करना अच्छा लगेगा। कृपया बातचीत को फिर से खोलें या किसी अन्य खुले मुद्दे पर निर्देशित करें! धन्यवाद

इसलिए हम वैकल्पिक कम फ़ाइल लोड करने के लिए कुछ वेबपैक मैनिपुलेशन का उपयोग करके यह काम कर रहे थे (कम से कम अब तक):

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

जहां src/style.less फ़ाइल index.less #$ फ़ाइल के समान फ़ाइलों को लोड करती है, लेकिन उन्हें शीर्ष-स्तरीय चयनकर्ता के दायरे में लोड करती है:

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

नतीजा यह है कि सभी "वैश्विक" शैलियों को #root दायरे के साथ लागू किया जा रहा है:

`#मूल लेख,

एक तरफ जड़,

मूल संवाद,

जड़ अंजीर,

मूल आकृति,

मूल पाद लेख,

रूट हेडर,

रूट एचग्रुप,

मूल मुख्य,

रूट एनएवी,

मूल खंड {

प्रदर्शन क्षेत्र;
}
`
आदि...

आशा है कि यह किसी के लिए मददगार है।

दोस्तों, यह वास्तव में कष्टप्रद है। यह स्टाइलिंग व्यवहार वह नहीं है जिसकी आप विश्व स्तरीय UI लाइब्रेरी से अपेक्षा करेंगे।

कम से कम डॉक्स में ग्लोबल रीसेट का जिक्र करें, ताकि लोग भ्रमित न हों। या शायद कुछ गाइड "लीगेसी वेबसाइट में एकीकृत करना" व्यक्तिगत शैलियों और आइकनों को आयात करने के बारे में नुस्खा के साथ सहायक होगा

मुझे लगता है कि बंद होने के बाद अनुरक्षकों ने इस मुद्दे से सदस्यता समाप्त कर दी है क्योंकि उन्होंने तब से चर्चा में भाग नहीं लिया है, इसलिए हमें शायद इस पर कोई आधिकारिक समर्थन नहीं मिलेगा जब तक कि हम एक नया मुद्दा नहीं खोलते, उन्हें सीधे पिंग करते हैं या एक पीआर खोलते हैं।

मुझे अंत में मूल antd.css पर आधारित एक नई CSS फ़ाइल बनाकर इस समस्या से बचने का एक तरीका मिल गया, जिसमें प्रत्येक नियम एक कस्टम वर्ग के साथ उपसर्ग किया गया था। मेरा समाधान PostCSS, Gulp और postcss-prefixwrap प्लगइन का उपयोग करता है:

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

यह परिपूर्ण से बहुत दूर है, लेकिन आश्चर्यजनक रूप से अच्छी तरह से काम करता है। कम से कम मेरी जरूरतों के लिए ;-)

सार में antd CSS का एक तैयार संस्करण भी शामिल है, जो .antd-ns ("नेमस्पेस" के लिए शॉर्टहैंड के रूप में "एनएस") के साथ उपसर्ग करता है।

टिप्पणियाँ:
मेरे लिए एक महत्वपूर्ण आवश्यकता यह थी कि यह स्वचालित है, इसलिए प्रत्येक नई चींटी रिलीज के लिए प्रीफिक्स्ड सीएसएस आसानी से तैयार किया जा सकता है।

  • यह प्रीफ़िक्स्ड सीएसएस बनाने के लिए एक उपकरण के रूप में अभिप्रेत है; इसलिए यह आपके प्रोजेक्ट से अलग किए गए विभिन्न फ़ोल्डर से चल सकता है। PostCSS या Gulp को शामिल करने के लिए आपके antd-आधारित प्रोजेक्ट की कोई आवश्यकता नहीं है! परिणामी सीएसएस को केवल आपकी परियोजना के स्थिर सीएसएस फ़ोल्डर में रखा जाना चाहिए (जो कि तदनुसार कॉन्फ़िगर किए जाने पर गुलप द्वारा किया जाता है)।
  • postcss-prefixwrap कम से कम संस्करण 1.3.0 होना चाहिए, जिसमें antd कीफ़्रेम एनिमेशन को संरक्षित करने के लिए मेरा पैच शामिल है

टिप्पणियाँ / प्रतिक्रिया हमेशा सराहना की!

अपने बढ़िया पोस्टसीएसएस पोस्टसीएसएस-प्रीफिक्सवैप प्लगइन के साथ इसे संभव बनाने के लिए @dbtedman को धन्यवाद।

टिप्पणियाँ / प्रतिक्रिया की सराहना की!

मुझे अंत में मूल antd.css पर आधारित एक नई CSS फ़ाइल बनाकर इस समस्या को दूर करने का एक तरीका मिल गया, जिसमें प्रत्येक नियम एक कस्टम वर्ग के साथ उपसर्ग किया गया था।

यह आईएमएचओ सबसे कठोर समाधान है।
व्यक्तिगत रूप से, मुझे इसके लिए वर्तमान में कोई आवश्यकता नहीं है, लेकिन यह सभी के लिए फायदेमंद होगा यदि कोई कम फाइलों में प्रत्येक सीएसएस नियम से पहले एक वर्गनाम कम चर (जैसे .@{scope} ) जोड़ने के लिए पीआर जमा करेगा।

डिफ़ॉल्ट रूप से, यह चर वर्तमान व्यवहार को तोड़ने से बचने के लिए खाली होगा।

शैलियों को अलग करने के लिए केवल antd के साथ चर सेट करना होगा।

मुझे लगता है कि यह समाधान अनुरक्षकों के लिए स्वीकार्य होगा और आगे बढ़ने की अनुमति देगा।

यहां एक कामकाज है जो मेरे लिए काम करता है। मैंने 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';

.babelrc में मेरे पास है:

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

जेएस बिल्ड आकार को अनुकूलित करने के लिए जैसा कि https://ant.design/docs/react/getting-started#Import -on-Demand और https://github.com/ant-design/babel-plugin-import में वर्णित है।

अनुकूलित स्टाइल के लिए मैंने अपना वेबपैक कॉन्फिगरेशन इसमें बदल दिया:

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

जैसा कि https://ant.design/docs/react/customize-theme#1)-Using-theme-property-(recommended-way) में वर्णित है

बीटीडब्लू: मैंने प्रसंस्करण से इस "बेस.लेस" फ़ाइल को अनदेखा करने के लिए new webpack.IgnorePlugin(/style\/core\/base/) का उपयोग करने का प्रयास किया लेकिन मैं इसे काम नहीं कर सका। मुझे नहीं पता क्यों। मेरी परिकल्पना यह है कि क्योंकि इसे कम से संसाधित किया जाता है, न कि सीधे वेबपैक के साथ।

इसके लायक क्या है, मैंने मैन्युअल रूप से antd.css को संपादित किया और मेरे द्वारा उपयोग किए जाने वाले किसी भी antd घटकों को तोड़े बिना अवांछित स्टाइल को हटाने में सक्षम था।

@paneq मैं वर्तमान में वही कर रहा हूं। ध्यान दें कि babel-plugin-import का स्टाइल विकल्प भी एक फंक्शन हो सकता है, जो यह तय कर सकता है कि किसी स्टाइल को शामिल किया जाना चाहिए या नहीं। मुझे यह काम करने के लिए नहीं मिला। डिबग करना होगा कि ...
शायद मैं भी उस विकल्प की गलत व्याख्या कर रहा हूँ?

@paneq मैंने जो किया है उसकी प्रतिलिपि बनाई है और ऐसा लगता है कि अब तक काम किया जा रहा है, लेकिन मैंने यह देखने के लिए पर्याप्त घटकों की कोशिश नहीं की है कि किसके लिए उस वैश्विक सीएसएस की आवश्यकता है। धन्यवाद

@vthinkxie

नमस्ते, .ant से शुरू होने वाले सभी तत्वों से मेल खाने का प्रयास करना संभव होना चाहिए, और उन्हें शैलियों को असाइन करना चाहिए

*[वर्ग^='चींटी-']{
बॉक्स-साइज़िंग: बॉर्डर-बॉक्स;
-वेबकिट-टैप-हाइलाइट-रंग: आरजीबीए (0, 0, 0, 0); // मोबाइल सफारी के लिए टैप हाइलाइट रंग हटाएं
}

इसमें क्रॉसब्रोसर संगतता होनी चाहिए और इसे लागू करने में अधिक समय नहीं लगना चाहिए।

इसलिए हम वैकल्पिक कम फ़ाइल लोड करने के लिए कुछ वेबपैक मैनिपुलेशन का उपयोग करके यह काम कर रहे थे (कम से कम अब तक):

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

जहां src/style.less फ़ाइल index.less #$ फ़ाइल के समान फ़ाइलों को लोड करती है, लेकिन उन्हें शीर्ष-स्तरीय चयनकर्ता के दायरे में लोड करती है:

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

नतीजा यह है कि सभी "वैश्विक" शैलियों को #root दायरे के साथ लागू किया जा रहा है:

आप कम लोडर के किस संस्करण का उपयोग कर रहे हैं? ऐसा लगता है कि यह केवल 3.0.0 के साथ काम करता है? देखो। जैसे https://github.com/webpack-contrib/less-loader/issues/184

साथ ही, इस वर्कअराउंड के लिए आप किस संस्करण का उपयोग कर रहे थे? मैं जो कारण पूछ रहा हूं वह यह है कि मुझे [email protected] और [email protected] के साथ भी सफलता नहीं मिली (वेबपैक में बदलाव के बाद हल करने में समस्या थी)। ..

मुझे नहीं पता कि यह किसी की मदद करता है, लेकिन निम्नलिखित ने मुझे केवल उपयोग में आने वाले घटक के लिए सीएसएस आयात करने में मदद की:

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

मुझे नहीं पता कि यह किसी की मदद करता है, लेकिन निम्नलिखित ने मुझे केवल उपयोग में आने वाले घटक के लिए सीएसएस आयात करने में मदद की:

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

हाँ, ऐसा लगता है कि यह कई घटकों के लिए ठीक काम करता है। आपका मिलाप भिन्न हो सकता है, हालांकि -- कम से कम Select को केवल घटक की अपनी शैलियों की तुलना में थोड़ी अधिक आवश्यकता होती है। चयनों में "निकालें" आइकन अन्यथा प्रदर्शित नहीं होगा; मेरे पास इस मुद्दे को पूरी तरह से ट्रैक करने का समय नहीं था, लेकिन शायद मैं कुछ मामूली हूं। तो आपको कुछ घटकों में मुख्य शैलियों से कुछ शैलियों की नकल करने की आवश्यकता हो सकती है।

हालांकि यह विकल्प बिल्कुल सही नहीं है, लेकिन यह कई घटकों के लिए अच्छा काम कर सकता है। कस्टम शैलियों में अपडेट के साथ टूटने का खतरा होता है, लेकिन जब आप अपने अपडेट करना चाहते हैं तो आप स्पष्ट रूप से नियंत्रित कर सकते हैं।

हमारे संगठन के लिए मुझे जो सबसे अच्छा समाधान मिला है, वह है antd से पूरी CSS शीट को शामिल करना, किसी भी शैली के साथ जो गैर antd नामित शैलियों को प्रभावित करती है। माइलेज अलग-अलग हो सकता है, और स्पष्ट रूप से _every_ स्टाइल का नकारात्मक पक्ष अब आयात किया जा रहा है। लेकिन यह अच्छी तरह से काम करता है और लगभग दो महीने तक ऐसा करने के बाद मैंने कोई समस्या नहीं देखी है।

@jaleikas
क्या आपको इस पर कोई उपाय मिला है? जहाँ तक मैं बता सकता हूँ, [email protected] के साथ समस्या अभी भी हल नहीं हुई है और इसलिए NormalModuleReplacementPlugin के साथ सुझाया गया फ़िक्स काम नहीं करता है। यह समाधान वास्तव में सबसे अच्छा लगता है क्योंकि चीजों को मैन्युअल रूप से ओवरराइड और स्कोप किया जा सकता है।
मैंने आपके जैसा ही प्रयास किया, कम लोडर को डाउनग्रेड किया, लेकिन फिर वेबपैक समाधान काम नहीं करता।

यहां [email protected] का उपयोग करना।

इससे पीड़ित लोग पैकेज को सीधे रिपॉजिटरी से जोड़कर मेरे कांटे को आज़माना चाह सकते हैं

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

या

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

मैंने बस आधार को त्याग दिया और बिना किसी अन्य संशोधन के इसे बनाया। यह मेरे मामले में काम करता है, मैं इसके कई घटकों का उपयोग नहीं करता। यह शायद कुछ घटकों से प्रभावित होगा, खासकर यदि आपके पास अपने प्रोजेक्ट में पहले से ही उचित रीसेट स्टाइल शीट नहीं है। #4546

यह मेरे लिए काम करता है

जो लोग इससे पीड़ित हैं वे पैकेज को सीधे रिपॉजिटरी से जोड़कर मेरे कांटे को आजमा सकते हैं

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

या

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

मैंने केवल आधार रहित को खारिज किया और इसे बिना किसी अन्य संशोधन के बनाया। यह मेरे मामले में काम करता है, मैं इसके कई घटकों का उपयोग नहीं करता हूं। यह शायद कुछ घटकों के लुक को तोड़ देगा, खासकर यदि आपके पास अपने प्रोजेक्ट में पहले से ही समझदार रीसेट स्टाइलशीट नहीं है। #4546

इस समाधान के लिए धन्यवाद!

क्या आपको इस पर कोई उपाय मिला है? जहाँ तक मैं बता सकता हूँ, [email protected] के साथ समस्या अभी भी हल नहीं हुई है और इसलिए NormalModuleReplacementPlugin के साथ सुझाया गया फ़िक्स काम नहीं करता है। यह समाधान वास्तव में सबसे अच्छा लगता है क्योंकि चीजों को मैन्युअल रूप से ओवरराइड और स्कोप किया जा सकता है।

मैंने एंटडी का उपयोग बंद करना चुना, और कुछ अस्थिर घटकों (जैसे आरसी-स्विच) को चुनने का फैसला किया। समस्या यह है कि अधिकांश "अस्थिर" घटक या तो भयानक रूप से/दस्तावेज नहीं हैं, और उनमें से कुछ भी अलग तरह से व्यवहार करते हैं, इसलिए अधिकांश भाग के लिए, मैंने छोड़ दिया और कहीं और देखा ...

नमस्ते, .ant से शुरू होने वाले सभी तत्वों से मेल खाने का प्रयास करना संभव होना चाहिए, और उन्हें शैलियों को असाइन करना चाहिए

*[वर्ग^='चींटी-']{
बॉक्स-साइज़िंग: बॉर्डर-बॉक्स;
-वेबकिट-टैप-हाइलाइट-रंग: आरजीबीए (0, 0, 0, 0); // मोबाइल सफारी के लिए टैप हाइलाइट रंग हटाएं
}

इसमें क्रॉसब्रोसर संगतता होनी चाहिए और इसे लागू करने में अधिक समय नहीं लगना चाहिए।

@ tylik1 , धन्यवाद! मुझे अपने बाकी इलेक्ट्रॉन ऐप से मिलान करने के लिए बस फ़ॉन्ट-फ़ैमिली को ठीक करने की आवश्यकता है। इसने मुझे पूरी तरह से बचा लिया।

मुझे नहीं पता कि यह किसी की मदद करता है, लेकिन निम्नलिखित ने मुझे केवल उपयोग में आने वाले घटक के लिए सीएसएस आयात करने में मदद की:

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

यह मेरे लिए निम्नलिखित द्वारा काम करता है।

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

दुर्भाग्य से यह एक शो स्टॉपर है। मैं एंटडी को भी लागू नहीं करूंगा, भले ही तारीख पिकर सबसे अच्छा है जो मुझे अब तक मिल सकता है।

वर्तमान में हम अपनी कंपनी के लिए एक प्रतिक्रिया घटक पुस्तकालय की खोज कर रहे हैं और यह भी हमारे लिए एक अवरुद्ध मुद्दा है, और हम शायद इसके कारण चींटी का उपयोग नहीं करते हैं।

हम प्रतिक्रिया एमयूआई पर भी विचार कर रहे हैं, जिसमें शानदार थीम विकल्प हैं, हो सकता है कि आप देख सकें कि वे इसे कैसे करते हैं और कुछ इसी तरह लागू करते हैं।

मैंने टिप्पणी करने के लिए https://www.npmjs.com/package/patch-package का उपयोग किया

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

antd-mobile/es/style/index.js से।
मेरा उद्देश्य बनाने के लिए next.js प्राप्त करना था, इसलिए मेरे मामले में मैंने इसके बजाय अपने हेडर में एक सीएनडी लिंक शामिल किया।

यह 2020 था, मानवता मर गई, कोरोनावायरस, चींटी-डिजाइन परियोजना में वैश्विक शैलियों को जोड़ता है ...

#9363 . में ट्रैकिंग

क्या यह पृष्ठ उपयोगी था?
0 / 5 - 0 रेटिंग्स