Ant-design: تم تضمين CSS العام مع استيراد CSS للمكون

تم إنشاؤها على ٢١ ديسمبر ٢٠١٦  ·  89تعليقات  ·  مصدر: ant-design/ant-design

شكرا لهذه المكتبة العظيمة!

حاولت استخدام babel-plugin-import لإجراء عمليات استيراد CSS معيارية ، ولكن جنبًا إلى جنب مع css لمكون فردي ، هناك الكثير من ملفات css العامة التي يتم استيرادها والتي تتداخل مع الأنماط الحالية الخاصة بي. هل من الممكن استيراد CSS لمكون فردي دون تضمين CSS عالمي؟

شكرا!

🗣 Discussion 🙅🏻‍♀️ WON'T RESOLVE

التعليق الأكثر فائدة

هذا تصميم رهيب بالرغم من ذلك.

ال 89 كومينتر

هل تقصد قواعد CSS مثل هذا؟

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

هذا تصميم رهيب بالرغم من ذلك.

هذه المشكلة تجعل هذه المكتبة صعبة للغاية للعمل معها. خاصة وجود خصائص عالمية على الجسم وما إلى ذلك. أعتقد أنه يجب توضيح هذه المشكلة بشكل أكبر ما لم تكن لديك خطط لتغيير هذا.

Forestdevpeitalin إنها مشكلة معروفة ، لكن ليس لدينا الوقت الكافي لحل هذه المشكلة.

لكن يمكننا الاستمرار في المناقشة هنا.

إذا تمكنا من استيراد التغييرات العاجلة ، فيمكننا حل هذه المشكلة. مثل ، نقل الأنماط في إعادة التعيين إلى أنماط المكونات:

نقل:

* {
  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'

هل هناك أي تحديث على ذلك؟

يمكننا المناقشة ، لكن ليس لدينا الوقت لتطبيق أي حل (إذا كان بإمكاننا إيجاد) الآن.

أعتقد أن هذه مشكلة حرجة حيث لا يستطيع الكثير من الأشخاص تحمل تكلفة استيراد ملف css عالمي وتجاوز أنماطهم الحالية

هذا أمر مزعج حقًا وهو ما منعني من تبني أنتد

سيؤدي هذا إلى حظر العديد من المطورين #

لأن النمل لا يمكن أن يتوافق مع bootstarp ، اضطررت للتخلي عن استخدام النمل.

ماذا عن وضع ملف أقل في مكتبة مستقلة.

بالمناسبة. أنا أحاول

مرحبًا يا رفاق ، أنا أعمل على [email protected] وأحاول إيجاد حل لمشكلة الأنماط العالمية.

لقد جربت حل import 'antd/styles/reset.less' منbenjycui. اتضح أنه سيكون تغييرًا فاصلاً وسيجعل استيراد الأنماط أكثر تعقيدًا ، خاصة مع استيراد المكون الإضافي babel. لذلك قررت أن أجتازه.

ثم أجد أن النقطة الرئيسية لهذه المشكلة تدور حول 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

أضفت أيضًا رمز طباعة أفضل من bootstrap @ v4 لحل # 6162

جميع التحديثات في # 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';

هل يمكن لشخص ما أن يشرح بعض الخطوات لإصلاح هذه المشكلة حيث تم إغلاق هذه المشكلة الآن. أحاول استخدام antd في برنامج نصي لمحتوى ملحق chrome وهو يفسد جميع صفحات الويب.

abhinavzspace ، يمكنك تثبيت antd@next للحصول على الإصدار 3.0 Alpha ، والذي يحل هذه المشكلة إلى حد ما ولكن ليس بشكل كامل.

بعد الكثير من الوقت وجدت بعض الحلول التي تناسبني. ربما يعمل مع الآخرين ...

المشكلة هي أن كل مكون يستورد مجموعة من عمليات إعادة التعيين والتجاوزات العامة (بما في ذلك normalize.css) من style/core/base.less ، إذا تم تحميل هذه الأنماط بشكل غير متزامن فإنها تتجاوز أنماط الصفحة التي تؤدي إلى العبث بكل شيء.

وجدت أن الإضافة

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

إلى نقطة دخول مشروعي ، تقوم حزمة webpack بإعادة التعيين قبل جميع الأنماط الأخرى ، لذلك عند تحميل مكون غير متزامن ، لا يقوم باستيراد / تضمين عمليات إعادة التعيين مرة أخرى.

هل يجب أن يعطي index.less آخر لكل مكون. يمكن التحكم في الفهرس. وأيضًا تقريبًا كل الملفات الأقل قم بإزالة التوجيه @import أو استخدم فقط import (المرجع)

هل سيكون حلا جيدا؟

تسك تسك تسك. يجب أن تكون هذه المشكلة "مفتوحة" حتى يعرف الجميع أن هذه مشكلة معروفة. فقط تخلت عن antd في منتصف مشروع فقط من أجل هذا.

هذا هو المشكله الحقيقيه. تمت التوصية بـ Ant بالنسبة لي ويبدو أنه واعد ، لكن هذا السلوك يفسد تصميمنا الحالي ويجعل Ant يشعر وكأنه Bootstrap. 😦

يجب إبداء رأي النملة حول مظهر مكوناتها ، وليس مظهر موقع المستخدم.

تشير هذه المشكلة إلى أن Ant 3 يصلح هذه المشكلة. لكن ما زلت أرى الكثير من الأنماط العالمية. ما الذي يجب على المستخدمين فعله لتجنب إضافة تلك الأنماط العالمية؟

openjck لقد وجدت أن هذا يبدو أنه يعيد تعيين الأنماط العامة (أضفتها إلى نقطة دخول React الخاصة بي):

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

وجدت أنها مدفونة في التغيير الخاص بهم

لقد وجدت هذه الملاحظة ، لكنها لم تنجح معي. الوثائق متفرقة جدا. ما الواردات الأخرى المتعلقة بالنمط التي قمت بها ، وبأي ترتيب؟

بالنسبة إلى أنماط النمل ، فهذا يتعلق بها. أنا أستخدم الإعداد style: true أيضًا ، والذي قد يكون مهمًا.

ما هو نوع التغييرات العالمية التي تراها؟

أنا أستخدم React مع webpacker و Rails وأواجه نفس المشكلة من قبل. لحل هذه المشكلة ، في طريقة عرض HTML الخاصة بي ، أقوم بإضافة علامة ارتباط ورقة أنماط لاسم ملف CSS الحالي ضمن stylesheet_pack_tag ، وهذا يعمل.
= javascript_pack_tag 'root'
= stylesheet_pack_tag 'root'
= stylesheet_link_tag 'application'

@ jhdavids8 ، أين تضع style: true ؟ لست متأكدًا من أن هذا ينطبق على الإعداد الخاص بي.

أنا أستخدم تطبيق create-react-app. توصي الوثائق بإضافة هذا إلى إحدى أوراق الأنماط الرئيسية:

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

... ولكن القيام بذلك يقدم تغييرات نمطية عامة ، مثل مجموعة الخطوط وارتفاع الخط التي يتم ضبطها على الجسم.

أنا فقط أستخدم babel-plugin-import كما هو موثق هنا لاستيراد الأنماط حسب الطلب. الخيار style: true هو طريقة لاستيراد ملفات Sass المصدر (انظر هذا ) ، والتي نحتاجها لأننا نقوم أيضًا بتخصيص سمة Ant بشكل كبير

فريقنا تخلى للتو عن antd بسبب الأنماط العالمية 😭. أعلم أنك مشغول ولكن إذا تمكنت من إيجاد طريقة لحل هذه المشكلة ، فستزيد بشكل جذري من مدى انتشار antd.

يرجى إعادة فتح هذه المشكلة. ما زلت أرى هذا السلوك وكذلك الآخرون.

+1

+1

سيتم تجميع ملف css العام الذي أضفته بنفسي في منتصف /lib/style/index.css في كل مرة ، أريد فقط إزالة antd
أضف العرض الصحيح في IE 10-.
عودة
لغة البرمجة،
الجسم {
العرض: 100٪؛
الارتفاع: 100٪؛
}
لماذا يعد الأمر بالغ الصعوبة ... لماذا لا يتم وضع ملف css العمومي المخصص في نهاية /lib/style/index.css

+1

+1

لقد وجدت أنني تمكنت من حل المشكلة بطريقة وصفها @ afc163 .

عادةً ما تقوم بعمل import 'antd/lib/tabs/style/css'; ، مما يشير إلى ملف بداخله فقط:

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

أردت فقط استيراد Tabs CSS ، لذلك أضفت هذا إلى ملف المكون الخاص بي:

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

ويبدو أنه نمط مكون علامات التبويب الخاص بي بشكل مناسب دون التأثير على بقية الصفحة.

كن حذرًا ، لأن النمط الأول موجود لسبب ما - ربما تعتمد بعض مكونات antd عليه أكثر من غيرها وقد لا يعمل هذا في جميع الحالات.

_إذا لم تكن تفعل ذلك بالفعل ، فتأكد من إزالة الخاصية style من الإضافات .babelrc الخاصة بك:
[ "import", { "libraryName": "antd" } ] _

أتمنى أن يساعد هذا شخص ما!

هذا جنون تمامًا .... مكتبة مكونة "معيارية" تتعارض مع الأنماط العالمية. ليس لدي أي فكرة عن سبب حصول هذه المكتبة على تقدير كبير مع وجود خطأ جوهري. ناهيك عن أنهم أغلقوا هذه التذكرة كما لو تم حل المشكلة.

strongui babel-plugin-import لا يعمل من أجلك؟

abenhamdine لا لا. وأنا لست وحدي بالحكم من خلال التعليقات أعلاه.

باستخدام أحدث إصدار من المكتبة ، ما زلت أواجه هذه المشكلة.

هل وجد أي شخص إصلاحًا (من الناحية المثالية ليس إعادة تعيين)؟

لقد نجحت في استيراد CSS الدقيق للمكونات الأصغر التي أحتاجها

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

لكنني الآن أحاول تنفيذ جدول. يعتمد الجدول على العديد من الأنماط ، لذلك اضطررت إلى استيراد جميع أوراق CSS المختلفة بشكل منفصل ، وهو أمر جيد. _ باستثناء_ أنه بالنسبة لميزة الفرز ، أحتاج إلى icon CSS ، وهو غير موجود في antd/lib/icon . بدلاً من ذلك ، اضطررت إلى استيراد ورقة الأنماط الرئيسية لأن رمز css أعاد التوجيه إليه.

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

هذا هو الملف الذي يؤثر على باقي تطبيقي ☝️

على الأقل ، هل يمكنك القيام بذلك بحيث لا يتم إعادة توجيه أوراق CSS إلى الورقة الرئيسية؟ (مثل icon الذي أحتاجه لفرز الجدول؟)

أيضا ، @ afc163 يرجى إعادة فتح هذه المشكلة ، لم يتم حلها.

فقط اقرأ من خلال الموضوع وانظر علامة "لن تصلح". هذا خطأ P0 يحظر كل تطبيق كبير ، مكون مضمن يختار Ant.D ليصبح lib المكون الخاص به. يجب أن تكون العلامة "كسر القلب".

@ afc163 لماذا يتم وضع علامة على هذا في العالم على أنه لن يتم إصلاحه ؟؟ يتمثل جوهر فلسفة التفاعل والتصميم المعياري في عدم نزف المكونات إلى مكونات أخرى. هذا لا معنى له على الإطلاق. لقد قضيت بعض الوقت واستخرجت css لاختيار الشجرة وتمكنت من جعلها تعمل دون التأثير على أي شيء آخر ، لذلك أعلم أنه ممكن.

+1 لإعادة فتح هذه المشكلة. محاولة نقل تطبيقنا من Material-UI إلى AntD وهذا يمثل عائقًا رئيسيًا للدخول.

+1 لإعادة الفتح. babel-plugin-import لا يعمل معي ، جربت كل التعليمات والإرشادات. غير قادر على تغيير الخط العام لتطبيقي

كانت هناك مشكلة ذات صلة في blueprintjs palantir / blueprint # 244 .

أحد الاقتراحات هو استخدام ملحق postcss يسمى: css-byebye
https://github.com/AoDev/css-byebye

هذا قد يساعد كحل مؤقت.

مكتبة رائعة ولكنها طريقة مروعة للتعامل مع مستخدميها. لماذا يجب تغيير الخطوط الافتراضية؟ ولماذا لا توجد طريقة لإعادة تعيين الخطوط والتصميم؟

هذا يمنعنا - والعديد من الآخرين الذين يحكمون من قراءة التعليقات - من استخدام هذه المكتبة.

لا أعرف ما إذا كانت هذه مشكلة لغوية / ثقافية ، لكن مطوري هذه المكتبة - لاحظوا: ما الهدف من إنشاء مكتبة لا يرغب أحد في استخدامها؟ لماذا تجعل من الصعب على زملائك المطورين استخدام مكتبتك؟

ما الهدف من إنشاء مكتبة لا يرغب أحد في استخدامها؟ لماذا تجعل من الصعب على زملائك المطورين استخدام مكتبتك؟

من فضلك اجعلها معتدلة.
يستخدم العديد من المطورين والشركات الناشئة هذه المكتبة أو يرغبون في استخدامها.

هذه المكتبة مفتوحة المصدر ومجانية. إذا كنت لا تريد استخدامه ، فلا تستخدمه.
إذا كنت ترغب في تعديله ، فيمكنك تفرعه لاستخدامك الخاص أو إرسال بيان عام ، والمشرفون على تصميم النمل مفتوحون للمساهمات.

لذلك ليست هناك حاجة للتشدق هنا.

هذه المشكلة هي أيضًا بمثابة كسر للصفقة لفريقي.
نحن نحب المشروع وكل العمل الذي تم القيام به ، لكن هذه المشكلة الفردية تمنعنا من استخدامه.

لهذا السبب ما زلت أتابع هذه المشكلة على أمل إعادة فتحها بشكل ثابت في المستقبل القريب.

يا أنا معتدل جدا. وأنا لا أصرخ هنا.

أوجه انتباهك إلى أن مكتبتك - على الرغم من أنها رائعة - لا ينبغي أن يكون لها آثار جانبية غير ضرورية. تخيل لو استخدمت MomentJS (على سبيل المثال) وبدأت في عرض التواريخ والأوقات في Klingon!

"Go fork yourself" ليس هو الحل أيضًا. في الواقع ، هذه هي الحالة المحزنة والمثيرة للشفقة للعديد من المشاريع مفتوحة المصدر.

نحن نبني أنظمة معقدة بأنفسنا - لسنا مبتدئين هنا. نريد استخدام مكتبة والاستمرار في حياتنا. على الأقل يجب أن تكون هناك طريقة لمطالبة المكتبة بعدم تغيير الخط الافتراضي أو حجم الخط. هذا كل ما أطلبه - وآخرين هنا -.

يمكنك اختيار أن تكون صامتًا وتتجاهل هذه المخاوف - التركيز بدلاً من اختيار كلماتي - أو يمكنك اختيار فهم ما يقوله الناس هنا وتوفير طريقة لهم لاستخدام مكتبتك دون أي آثار جانبية.

قد تكون القوة معك بينما تعيش طويلا وتزدهر.

لا يمكن أن أتفق أكثر مع kotpal . ما يدهشني أن هذه المناقشة لا تدور حول "هل يمكنك إضافة هذه الميزة" أو "ألن يكون الأمر رائعًا إذا ..." ، إنها تحاول فعليًا إقناع المؤلف بأن أحد المكونات لا يجب أن يعبث بالمحتوى العالمي حالة. إنه حرفياً يشير إلى المفهوم الأساسي لـ ReactJS وأي تصميم معياري.

أنت لا تعبث بأي شيء مع GLOBAL ، إلا إذا كنت تقدم موضوعًا عالميًا أو شيء من هذا القبيل.

أفهم ما يقوله abenhamdine . لكنني أتفق أيضًا مع strongui .

ربما من المفترض أن تكون Ant تجربة كاملة. ولكن من الناحية العملية ، لا يزال العديد من الأشخاص بحاجة إلى العمل باستخدام رمز قديم لا يمكنهم تغييره. وإذا كان هذا المشروع يتعارض مع هذا الرمز القديم ، فإننا نفقد جميع مزايا استخدام React (أو أي إطار عمل آخر مثله) في المقام الأول.

إذا كانت هذه المشكلة تمنع الكثير من الأشخاص من التبني الكامل للمشروع ، فربما يمكننا أن نتعاون معًا ونضع مكافأة عليه أو شيء من هذا القبيل؟

أعلم أنني لا أمتلك المعرفة أو الوقت لإصلاح هذه المشكلة بمفردي ، فما الذي سيستغرقه المساهمون لإصلاحها؟ (ونعم إنها مشكلة وليست ميزة)

لقد حققت بعض النجاح في تجاوز Css العالمية التي توفرها antd واستخدام مشاريع مثل jsx المصمم.
يمكنك مشاهدة الموقع منتشر هنا! ملاحظة: عملها في التقدم.

لقد وجدت نفسي في نفس الموقف للتو ، وقد حققت نجاحًا معتدلًا باستخدام نفس الأسلوب الذي وصفه 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

يعمل هذا بشكل جيد مع معظم مكونات antd ، ولكن هناك عناصر أخرى لا تحتوي على ملف css محدد مرتبط بها ، ويمكن العثور على أنماطها فقط في المكون العام. هذا هو الحال بالنسبة لمكون 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

لقد استبعدت فقط base.less وقمت ببنائه دون أي تعديلات أخرى. إنه يعمل في حالتي ، لا أستخدم العديد من المكونات منه. من المحتمل أن يكسر مظهر بعض المكونات خاصة إذا لم يكن لديك بالفعل ورقة أنماط إعادة تعيين معقولة في مشروعك. # 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 :

# مقال جذر ،

الجذر جانبا ،

حوار الجذر

شكل الجذر ،

الرقم الجذر ،

تذييل الجذر

رأس الجذر ،

hgroup الجذر ،

الجذر الرئيسي ،

التنقل الجذر ،

قسم الجذر {

العرض محجوب؛
}
"
إلخ...

أتمنى أن يكون هذا مفيدًا لشخص ما.

يا رفاق ، إنه أمر مزعج حقًا. سلوك التصميم هذا ليس متوقعًا من مكتبة UI عالمية المستوى.

على الأقل اذكر حول إعادة التعيين العالمية في المستندات ، حتى لا يشعر الناس بالارتباك. أو ربما يكون دليل "الدمج في موقع الويب القديم" مع وصفة حول استيراد الأنماط والرموز الفردية مفيدًا

أعتقد أن المشرفين قد ألغوا اشتراكهم في هذه المشكلة بعد إغلاقه لأنهم لم يشاركوا في المناقشة منذ ذلك الحين ، لذلك ربما لن نتلقى أي دعم رسمي في هذا الشأن ما لم نفتح مشكلة جديدة ، أو نرسل لهم اتصالاً مباشرًا أو نفتح العلاقات العامة.

لقد وجدت أخيرًا طريقة للتحايل على هذه المشكلة من خلال إنتاج ملف CSS جديد استنادًا إلى antd.css الأصلي ، مع كل قاعدة مسبوقة بفئة مخصصة. يستخدم الحل الخاص بي PostCSS و Gulp و postcss-prefixwrap plugin:

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

إنه بعيد عن الكمال ، لكنه يعمل بشكل جيد بشكل مدهش. على الأقل لاحتياجاتي ؛-)

يحتوي الجوهر أيضًا على نسخة جاهزة من antd CSS ، مسبوقة بـ .antd-ns ("ns" كاختصار لـ "مساحة الاسم")

ملحوظات:
كان أحد المتطلبات المهمة بالنسبة لي هو أنه آلي ، لذلك يمكن بسهولة إنتاج CSS مسبوقة لكل إصدار جديد من النمل.

  • الغرض منه هو مجرد أداة لإنشاء CSS مسبوق ؛ حتى يمكن تشغيله من مجلد مختلف منفصل عن مشروعك. لا حاجة لمشروعك القائم على antd ليشمل PostCSS أو Gulp! يحتاج CSS الناتج فقط إلى وضعه في مجلد CSS ثابت لمشروعك (والذي يتم تنفيذه بواسطة Gulp إذا تم تكوينه وفقًا لذلك).
  • يجب أن يكون postcss-prefixwrap على الأقل الإصدار 1.3.0 ، والذي يتضمن التصحيح الخاص بي للحفاظ على الرسوم المتحركة للإطارات الرئيسية antd

التعليقات / التعليقات دائما موضع تقدير!

شكرًا لـ dbtedman لجعل هذا ممكنًا من خلال المكون الإضافي PostCSS postcss-prefixwrap الرائع الخاص به .

التعليقات / التعليقات موضع تقدير!

لقد وجدت أخيرًا طريقة للتحايل على هذه المشكلة من خلال إنتاج ملف CSS جديد استنادًا إلى antd.css الأصلي ، مع كل قاعدة مسبوقة بفئة مخصصة.

هذا هو IMHO الحل الأكثر استقامة.
شخصيًا ، لست بحاجة إلى هذا حاليًا ، ولكن سيكون من المفيد للجميع إذا أرسل شخص ما علاقات عامة لإضافة اسم فئة أقل متغيرًا (على سبيل المثال .@{scope} ) قبل كل قاعدة css في ملفات أقل.

بشكل افتراضي ، سيكون هذا المتغير فارغًا ، لتجنب كسر السلوك الحالي.

سيضطر المرء فقط إلى تعيين المتغير ، على سبيل المثال ، 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,
      }
    ]
  ]

لتحسين حجم إصدار JS كما هو موضح في https://ant.design/docs/react/getting-started#Import -on-Demand و https://github.com/ant-design/babel-plugin-import

للحصول على تصميم مخصص ، قمت بتغيير تهيئة webpack الخاصة بي إلى:

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/) لتجاهل هذا الملف "base.less" من المعالجة ولكني لم أستطع جعله يعمل. لا اعرف لماذا. فرضيتي هي أنه تتم معالجتها باستخدام LESS ، وليس باستخدام Webpack مباشرة.

لما تستحقه ، قمت بتحرير antd.css يدويًا وتمكنت من إزالة التصميم غير المرغوب فيه دون كسر أي مكونات antd التي أستخدمها.

paneq أفعل نفس الشيء حاليًا. لاحظ أن خيار النمط babel-plugin-import يمكن أن يكون أيضًا وظيفة ، والتي يمكن أن تحدد ما إذا كان يجب تضمين النمط. أنا فقط لم أجعلها تعمل. سيتعين تصحيح ذلك ...
ربما أساء تفسير هذا الخيار أيضًا؟

paneq لقد قمت بنسخ ما قمت به ويبدو أنه نجح حتى الآن ، لكنني لم أجرب ما يكفي من المكونات لمعرفة المكونات التي تتطلب هذه المغلق العامة. شكرا

تضمين التغريدة

مرحبًا ، يجب أن يكون من الممكن تجربة مطابقة جميع العناصر ، بدءًا من .ant ، وتعيين الأنماط لهم

* [class ^ = 'ant -'] {
تحجيم الصندوق: مربع الحدود ؛
-webkit-tap-light-color: rgba (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

أيضًا ، ما هو إصدار antd الذي كنت تستخدمه لهذا الحل البديل؟ سبب سؤالي هو أنني لم أحقق النجاح حتى مع [email protected] و [email protected] (واجه webpack مشاكل في الحل بعد التغيير). ..

لا أعرف ما إذا كان هذا يساعد أي شخص ، ولكن ما يلي ساعدني في استيراد CSS للمكون قيد الاستخدام فقط:

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

لا أعرف ما إذا كان هذا يساعد أي شخص ، ولكن ما يلي ساعدني في استيراد CSS للمكون قيد الاستخدام فقط:

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

نعم ، يبدو أن هذا يعمل بشكل جيد مع العديد من المكونات. قد تختلف المسافة المقطوعة الخاصة بك ، على الرغم من ذلك - على الأقل يحتاج Select إلى أكثر قليلاً من مجرد أنماط المكون الخاصة. لن يتم عرض رمز "الإزالة" في التحديدات بطريقة أخرى ؛ لم يكن لدي الوقت لتعقب المشكلة تمامًا ، لكن ربما يكون لدي شيء بسيط. لذلك قد تحتاج إلى تقليد بعض الأنماط من الأنماط الرئيسية في بعض المكونات.

في حين أن هذا الخيار ليس مثاليًا تمامًا ، إلا أنه يمكن أن يعمل جيدًا للعديد من المكونات. تتعرض الأنماط المخصصة لخطر الانقطاع عن التحديثات ، ولكن من الواضح أنه يمكنك التحكم في الوقت الذي تريد إجراء التحديثات الخاصة بك.

أفضل حل وجدته لمنظمتنا هو تضمين ورقة CSS بأكملها من antd ، مع إزالة أي أنماط تؤثر على الأنماط المسماة غير antd. قد تختلف الأميال ، ومن الواضح أن هناك جانبًا سلبيًا لكل نمط يتم استيراده الآن. لكنها تعمل بشكل جيد ولم أشاهد أي مشاكل بعد القيام بذلك لمدة شهرين تقريبًا.

تضمين التغريدة
هل وجدت حلا لهذا؟ بقدر ما أستطيع أن أقول ، لم يتم حل المشكلة مع [email protected] وبالتالي فإن الإصلاح المقترح مع NormalModuleReplacementPlugin لا يعمل. يبدو هذا الحل في الواقع أفضل حل حيث يمكن تجاوز الأشياء يدويًا وتحديد نطاقها.
لقد جربت نفس الشيء الذي قمت به ، حيث قمت بتقليل برنامج التحميل الأقل ، ولكن بعد ذلك لا يعمل حل webpack.

باستخدام [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

لقد استبعدت فقط base.less وقمت ببنائه دون أي تعديلات أخرى. إنه يعمل في حالتي ، لا أستخدم العديد من المكونات منه. من المحتمل أن يكسر مظهر بعض المكونات خاصة إذا لم يكن لديك بالفعل ورقة أنماط إعادة تعيين معقولة في مشروعك. # 4546

شكرا لك على هذا الحل!

هل وجدت حلا لهذا؟ بقدر ما أستطيع أن أقول ، لم يتم حل المشكلة مع [email protected] وبالتالي فإن الإصلاح المقترح مع NormalModuleReplacementPlugin لا يعمل. يبدو هذا الحل في الواقع أفضل حل حيث يمكن تجاوز الأشياء يدويًا وتحديد نطاقها.

اخترت التوقف عن استخدام antd ، وقررت اختيار بعض المكونات غير المصممة (مثل مفتاح التحكم عن بعد). تكمن المشكلة في أن معظم المكونات "غير المصممة" إما أنها فظيعة / غير موثقة ، ويبدو أيضًا أن بعضها يتصرف بشكل مختلف ، لذلك بالنسبة للجزء الأكبر ، استسلمت وبحثت في مكان آخر ...

مرحبًا ، يجب أن يكون من الممكن تجربة مطابقة جميع العناصر ، بدءًا من .ant ، وتعيين الأنماط لهم

* [class ^ = 'ant -'] {
تحجيم الصندوق: مربع الحدود ؛
-webkit-tap-light-color: rgba (0 ، 0 ، 0 ، 0) ؛ // إزالة لون تمييز الحنفية لرحلات السفاري المتنقلة
}

يجب أن يكون متوافقًا مع المتصفحات ويجب ألا يستغرق وقتًا طويلاً للتنفيذ.

@ tylik1 ، شكرا لك! كنت بحاجة فقط إلى إصلاح مجموعة الخطوط لتتناسب مع بقية تطبيق الإلكترون الخاص بي. هذا أنقذني تمامًا.

لا أعرف ما إذا كان هذا يساعد أي شخص ، ولكن ما يلي ساعدني في استيراد CSS للمكون قيد الاستخدام فقط:

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

للأسف هذا هو سدادة العرض. لن أقوم أيضًا بتطبيق Antd على الرغم من أن منتقي التاريخ هو أفضل ما يمكن أن أجده حتى الآن.

نحن نبحث حاليًا عن مكتبة مكونات تفاعل لشركتنا وهذه أيضًا مشكلة حظر بالنسبة لنا ، وربما لا نستخدم النملة بسببها.

نحن نبحث أيضًا في رد فعل MUI ، الذي يحتوي على خيارات رائعة ، ربما يمكنك إلقاء نظرة على كيفية القيام بذلك وتنفيذ شيء مشابه.

لقد استخدمت https://www.npmjs.com/package/patch-package للتعليق

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

من antd-mobile/es/style/index.js .
كان هدفي هو الحصول على next.js للبناء ، لذلك في حالتي قمت فقط بتضمين رابط CND في رأسي بدلاً من ذلك.

كان عام 2020 ، ماتت البشرية ، وفيروس كورونا ، وتصميم النمل يضيف أنماطًا عالمية إلى المشروع ...

التعقب في # 9363

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات