كيفية تخصيص تصميم Ant باستخدام React & Webpack ... دليل مفقود

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

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

يمكن العثور هنا على TL أو DR أو "فقط دعني أرى الرمز".

* القراء - يرجى التعليق إذا كنت ترى أي أخطاء أو تقديم طلبات السحب. تكمن الفكرة في تحديث هذه الكتابة وتحديثها بأكبر قدر ممكن من الدقة (m̶a̶y .b̶e̶ ̶e̶v̶e̶n̶ ̶m̶e̶r̶g̶e̶d̶ ̶i̶n̶t̶o̶ ̶t̶h̶e̶ ̶d̶o̶c̶s̶ - التحديث 2017–06–25 ، إضافة إلى المستندات.

* التحديث 2017–11–03 - أعتذر عن عدم تمكني من الإجابة على جميع الأسئلة الواردة. نظرًا لعدد لا يحصى من الطرق لتهيئة تطبيق التفاعل ، من الصعب تقديم أي دعم في قسم التعليقات. يرجى محاولة تشغيل التجريبي ريبو أضع معا وتقديم طلبات السحب أو أخطاء الملف هناك. شكر!

الخطوة الأولى - تثبيت الحزم:

  • تثبيت تصميم النمل:

npm تثبيت antd - حفظ

  • تثبيت مُحمّل المكون الإضافي المعياري من Ant (لا يُسمى بهذا الاسم):

سيتيح لنا ذلك تجميع مكونات النمل التي نستخدمها فقط.

npm تثبيت babel-plugin-import - حفظ ديف

  • قم بتثبيت الحزمة الأقل من فارس إلى js:

يأخذ في محتويات ملف أقل كسلسلة وإرجاع كائن يحتوي على جميع المتغيرات التي عثر عليها.

npm تثبيت أقل فارس إلى شبيبة - حفظ ديف

  • ثبِّت عددًا أقل من اللواحق و webpack css / لوادر منخفضة إذا لم تكن قد قمت بالفعل:

npm تثبيت أقل محمل نمط المغلق-محمل -save-dev

الخطوة الثانية - تكوين بابل لودر:

أضف babel-plugin-import إلى محمل webpack babel أو استخدم ملف .babelrc.

//.babelrc
{
  "المسبقة: [...]
  "الإضافات": [
    ["import"، {"libraryName": "antd"، "style": true}]،
    ...
  ]
}
// webpack2.config.js
وحدة: {
  قواعد: [
    {
      لودر: 'بابل لودر' ،
      استبعاد: / node_modules / ،
      اختبار: / \. js$/ ،
      خيارات: {
        المسبقة: [...]
        الإضافات: [
          ['import'، {libraryName: "antd"، style: true}]
        ]
      }،
    }،
    ...
  ]
}
// webpack1.config.js
وحدة: {
  اللودرات: [
    {
      اختبار: /\.jsx؟$/ ،
      استبعاد: / node_modules / ،
      لودر: 'بابل' ،
      استعلام: {
        الإضافات: [
          ['import'، {libraryName: "antd"، style: true}]
        ]
      }
    }،
  ...
  ]
}

الخطوة الثالثة - إنشاء ملف .less لتجاوزات متغير سمة النملة:

// ant-default-vars.less
// متغيرات السمات المتاحة يمكن العثور عليها في
// https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less

@ اللون الأساسي: # 193D71 ؛ <- لدينا أول موضوع النملة تجاوز!

الخطوة الرابعة - تكوين webpack less-loader:

// webpack * .config.js
const مسار = تتطلب ('مسار') ؛
const fs = require ('fs') ؛

const lessToJs = requ ('less-vars-to-js')؛
const themeVariables = lessToJs (fs.readFileSync (path.join (__ dirname، './ant-theme-vars.less')، 'utf8'))؛
...
// webpack2.config.js
وحدة: {
  قواعد: [
    ...
    {
      اختبار: / \.
      استعمال: [
        {loader: "style-loader"}،
        {loader: "css-loader"} ،
        {لودر: "أقل محمل" ،
          خيارات: {
            alterVars: themeVariables
          }
        }
      ]
    }
  ]
}
//webpack1.config.js
وحدة: {
  اللودرات: [
    {
      اختبار: / \.
      اللودر: 'style-loader! css-loader! less-loader' ،
      استعلام: {
        alterVars: themeVariables
      }
    }،
  ...
  ]
}

الخطوة الخامسة (اختياري) - تكوين الخطوط:

يتم تقديم الخطوط / الرموز من Alibaba CDN افتراضيًا. يمكنك تنزيلها وخدمتها من مشروعك أو إضافتها إلى CDN الخاص بك (مستحسن). يوضح أدناه كيفية تكوين عنوان URL الذي يتم تقديمه منه.

// webpack * .config.js
const مسار = تتطلب ('مسار') ؛
const fs = require ('fs') ؛

const lessToJs = requ ('less-vars-to-js')؛
const themeVariables = lessToJs (fs.readFileSync (path.join (__ dirname، './ant-theme-vars.less')، 'utf8'))؛
// lessToJs لا يدعم @ icon-url: "some-string" ، لذلك نحن نقوم بإضافته يدويًا إلى كائن themeVariables js المنتج هنا
themeVariables ["@ icon-url"] = "'// localhost: 8080 / fonts / iconfont'"؛

هذا هو!

نأمل أن يساعد هذا أولئك الذين عالقوا أو مرتبكون عند محاولة تخصيص مكتبة ant.

المحاذير

  • يمكنك فقط تجاوز ما هو موجود في ملف default.less للنمل.
  • إذا كنت بحاجة إلى تعديل السمة خارج التقصير في نملة. ما لم يكن لديك للعثور على فئة (فصول) وتجاوزها يدويا في مشاريعك css :(
  • تتم تجاوزات السمات في وقت التحويل البرمجي ، لذلك لا يوجد تبديل مضمّن خلال وقت التشغيل.