কীভাবে অ্যান্ট ডিজাইনটি প্রতিক্রিয়া এবং ওয়েবপ্যাকের সাথে মানিয়ে নেবে: অনুপস্থিত ম্যানুয়াল

পিঁপড়া ডিজাইনের প্রতিক্রিয়া উপাদানগুলির একটি আশ্চর্যজনক অ্যারে রয়েছে। আপনি যখন এটি পড়েন, কেন আমি বা সেগুলি কীভাবে ব্যবহার করব তা ব্যাখ্যা করার দরকার নেই, তবে কীভাবে তাদের পছন্দসই করা যায়।

অফিসিয়াল ডকুমেন্টগুলিতে আপনি কেবলমাত্র সমন্বয় সম্পর্কিত কিছু তথ্য পাবেন তবে সম্পূর্ণ গাইড পাবেন না। এই বিবরণটি প্রাথমিক সেটআপের মাধ্যমে আপনাকে ডিফল্ট এন্টি-ডি থিমটি কাস্টমাইজ করার জন্য গাইড করার উদ্দেশ্যে।

টিএল; ডিআর বা "আমাকে কোডটি দেখতে দিন" এখানে পাওয়া যাবে।

* পাঠক - আপনি বাগগুলি দেখতে বা টানার অনুরোধগুলি জমা দিলে মন্তব্য করুন। এই চিঠিটি আপ টু ডেট এবং যথাসম্ভব নির্ভুল রাখার ধারণাটি রয়েছে (নথিগুলিতে যুক্ত 2017 to06–25 আপডেট করুন)।

* 2017–11–03 আপডেট করুন - আগত সমস্ত প্রশ্নের উত্তর দিতে সক্ষম না হওয়ায় আমি ক্ষমাপ্রার্থী। একটি প্রতিক্রিয়া অ্যাপ্লিকেশনটির জন্য প্রচুর কনফিগারেশন বিকল্পের কারণে, মন্তব্য ক্ষেত্রে সমর্থন সরবরাহ করা কঠিন is আমি একসাথে যে ডেমো রেপো রেখেছি তা চালানোর চেষ্টা করুন এবং সেখানে পুলের অনুরোধ বা ফাইল ত্রুটি জমা দিন submit আপনাকে অনেক ধন্যবাদ!

প্রথম পদক্ষেপ - প্যাকেজ ইনস্টল করুন:

  • পিঁপড়া ডিজাইন ইনস্টল করুন:

এনপিএম ইনস্টল করুন এনটিডি - সেভ করুন

  • পিঁপড়া মডুলার প্লাগ-ইন লোডার ইনস্টল করুন (ভুল নাম সহ):

এইভাবে আমরা কেবল আমাদের ব্যবহার করি পিঁপড়া উপাদানগুলি বান্ডিল করতে পারি।

এনপিএম ইনস্টল ব্যাবেল-প্লাগইন-আমদানি - সেভ-ডেভ

  • কম-ভার্স-টু-জেএস প্যাকেজটি ইনস্টল করুন:

একটি স্ট্রিং হিসাবে একটি কম ফাইলের বিষয়বস্তু নেয় এবং এমন একটি বস্তু প্রদান করে যা পাওয়া যায় সমস্ত ভেরিয়েবলগুলি contains

এনপিএম কম-ভার্স-টু-জেএস ইনস্টল করুন - সেভ-ডেভ

  • আপনার যদি ইতিমধ্যে না থাকে তবে কম এবং ওয়েবপ্যাক সিএসএস / কম লোডার ইনস্টল করুন:

এনপিএম কম কম-লোডার সিএসএস-লোডার শৈলী-লোডার ইনস্টল করুন - সেভ-ডেভ

দ্বিতীয় পদক্ষেপ - ব্যাবেল লোডার কনফিগার করুন:

ওয়েবপ্যাক ব্যাবেল লোডারটিতে ব্যাবেল-প্লাগইন-আমদানি যুক্ত করুন বা একটি .babelrc ফাইল ব্যবহার করুন।

//.babelrc pre "প্রিসেটগুলি: [...]" প্লাগইনস ": [[" "আমদানি", library "লাইব্রেরি নাম": "অ্যান্ট", "স্টাইল": সত্য}], ...]}
// webpack2.config.js মডিউল: {বিধি: [{লোডার: 'বাবেল-লোডার', বাদ: / নোড_মডিউল /, পরীক্ষা: /\.js$/, বিকল্পগুলি: {প্রিসেট: [...] প্লাগইন: [ ['আমদানি', {লাইব্রেরি নাম: "এন্টডি", স্টাইল: সত্য}]]},}, ...]}
// webpack1.config.js মডিউল: {লোডার: [{পরীক্ষা: /\.jsx?$/, বাদ: / নোড_মডিউল /, লোডার: 'বাবেল', ক্যোয়ারী: {প্লাগইনস: [['আমদানি', {লাইব্রেরির নাম: "এন্টডি", স্টাইল: সত্য}]]}}, ...]}

পদক্ষেপ 3 - পিপীলিকার নকশা ভেরিয়েবলগুলিকে ওভাররাইড করতে একটি .বিহীন ফাইল তৈরি করুন:

// ant-default-vars.less // আপনি // https://github.com/ant-design/ant-design/blob/master/compferences/style/themes/default.less @ প্রাথমিক রঙে উপলভ্য টপিক ভেরিয়েবলগুলি খুঁজে পেতে পারেন: # 193D71; <- আমাদের প্রথম পিঁপড়া ওভাররাইড!

চতুর্থ ধাপ - ওয়েবপ্যাকটি কম-লোডার কনফিগার করুন:

// ওয়েবপ্যাক * .config.js কনস্ট পাথ = প্রয়োজন ('পাথ'); কনস্ট fs = প্রয়োজনীয় ('fs'); কনট কম টোজেস = প্রয়োজনীয় ('কম-ভার্স-টু-জেএস'); কনস্ট থিমভেরিয়েবলস = কমটওজেজেস (fs.readFileSync (path.join (__ dirname, './ant-theme-vars.less'), 'utf8')); ...
// ওয়েবপ্যাক ২.কমফিগ.জেএস মডিউল: {বিধি: [... {পরীক্ষা: /\.less$/, ব্যবহার: [{লোডার: "স্টাইল-লোডার"}, {লোডার: "সিএসএস-লোডার"}, { লোডার: "কম-লোডার", বিকল্পগুলি: {মডিফাইবারস: থিমভেরিয়েবলস}}]}]}
//webpack1.config.js মডিউল: {লোডার: [{পরীক্ষা: /\.less$/, লোডার: 'স্টাইল-লোডার! CSS-লোডার! কম-লোডার ', ক্যোয়ারী: {মডিফাইবারস: থিমভ্যারিয়েবলস}}, ...]}

পঞ্চম ধাপ (alচ্ছিক) - ফন্টগুলি কনফিগার করুন:

হরফ / চিহ্নগুলি আলিবাবা সিডিএন স্ট্যান্ডার্ড হিসাবে সরবরাহ করে। আপনি এগুলি আপনার প্রকল্প থেকে ডাউনলোড এবং মোতায়েন করতে পারেন বা তাদের নিজের সিডিএনতে যুক্ত করতে পারেন (প্রস্তাবিত)। নিম্নলিখিতটি কীভাবে URL টি কনফিগার করতে পারে যা এটি পরিবেশন করবে।

// ওয়েবপ্যাক * .config.js কনস্ট পাথ = প্রয়োজন ('পাথ'); কনস্ট fs = প্রয়োজনীয় ('fs'); কনট কম টোজেস = প্রয়োজনীয় ('কম-ভার্স-টু-জেএস'); কনস্ট থিমভেরিয়েবলস = কমটওজেজেস (fs.readFileSync (path.join (__ dirname, './ant-theme-vars.less'), 'utf8'));
// কম টোজেগুলি @ আইকন-ইউআরএল: "কিছু-স্ট্রিং" সমর্থন করে না, তাই আমরা এখানে এটি নিজেই এখানে উত্পন্ন থিমের পরিবর্তনযোগ্য অবজেক্ট থিমভ্যারিয়েবলস ["@ আইকন-url"] = "'// লোকালহোস্ট: 8080 / ফন্ট / আইকনফন্ট' এ যুক্ত করি ";

এটাই!

আশা করি এটি এন্টি-ডি লাইব্রেরিটি কাস্টমাইজ করার ক্ষেত্রে যারা আটকে বা বিভ্রান্ত তাদের সহায়তা করবে।

রিজার্ভেশন

  • পিঁপড়ার ডিফল্ট.হীন ফাইলটিতে আপনি কেবল ওভাররাইট করতে পারেন।
  • আপনার যদি পিঁপড়ার ডিফল্ট সেটিংসের বাইরে নকশা পরিবর্তন করতে হয় তবে আপনাকে ক্লাস (গুলি) সন্ধান করতে হবে এবং ম্যানুয়ালি আপনার প্রকল্পগুলিতে সেগুলি ওভাররাইট করতে হবে। সিএসএস :(
  • থিম ওভাররাইডগুলি সংকলনের সময় করা হয় যাতে রানটাইমের সময় থিমের কোনও পরিবর্তন (সংহত) হয় না।