in English

সঁজুলি নিৰ্মাণ কৰক

আমাৰ আলেখ্যন নিৰ্মাণ কৰিবলে, উৎস ক'ড কম্পাইল কৰিবলে, পৰীক্ষাসমূহ চলাবলে, আৰু অধিক কৰিবলে Bootstrap ৰ অন্তৰ্ভুক্ত npm স্ক্ৰিপ্টসমূহ কেনেকৈ ব্যৱহাৰ কৰিব লাগে শিকিব।

টুলিং ছেটআপ

বুটষ্ট্ৰেপে ইয়াৰ নিৰ্মাণ ব্যৱস্থাপ্ৰণালীৰ বাবে npm স্ক্ৰিপ্টসমূহ ব্যৱহাৰ কৰে । আমাৰ package.json এ ফ্ৰেমৱৰ্কৰ সৈতে কাম কৰাৰ বাবে সুবিধাজনক পদ্ধতিসমূহ অন্তৰ্ভুক্ত কৰে, ক'ড কম্পাইলিং, পৰীক্ষাসমূহ চলোৱা, আৰু অধিক অন্তৰ্ভুক্ত কৰি।

আমাৰ নিৰ্মাণ ব্যৱস্থাপ্ৰণালী ব্যৱহাৰ কৰিবলে আৰু আমাৰ আলেখ্যন স্থানীয়ভাৱে চলাবলৈ, আপুনি Bootstrap ৰ উৎস নথিপত্ৰসমূহ আৰু ন'ডৰ এটা কপিৰ প্ৰয়োজন হ'ব । এই পদক্ষেপসমূহ অনুসৰণ কৰক আৰু আপুনি ৰক কৰিবলৈ সাজু হ'ব লাগে:

  1. Node.js ডাউনলোড আৰু ইনষ্টল কৰক , যিটো আমি আমাৰ নিৰ্ভৰশীলতাসমূহ পৰিচালনা কৰিবলৈ ব্যৱহাৰ কৰো।
  2. হয় Bootstrap ৰ উৎসসমূহ ডাউনলোড কৰক বা Bootstrap ৰ ভঁৰাল fork কৰক ।
  3. /bootstrapৰূট পঞ্জিকালৈ নেভিগেট কৰক আৰু package.jsonnpm install ত তালিকাভুক্ত আমাৰ স্থানীয় নিৰ্ভৰশীলতাসমূহ সংস্থাপন কৰিবলে চলাওক ।

সম্পূৰ্ণ হ'লে, আপুনি আদেশ শাৰীৰ পৰা প্ৰদান কৰা বিভিন্ন আদেশ চলাব পাৰিব।

npm লিপি ব্যৱহাৰ কৰা

আমাৰ package.json ত নিম্নলিখিত আদেশ আৰু কাৰ্য্যসমূহ অন্তৰ্ভুক্ত কৰা হৈছে:

কাৰ্য বিৱৰণ
npm run dist npm run dist/dist/কম্পাইল কৰা নথিপত্ৰসমূহৰ সৈতে ডাইৰেকটৰি সৃষ্টি কৰে । Sass , স্বয়ংক্ৰিয় উপসৰ্গ , আৰু terser ব্যৱহাৰ কৰে ।
npm test চলোৱাৰ পিছত স্থানীয়ভাৱে পৰীক্ষা চলায়npm run dist
npm run docs-serve আলেখ্যনসমূহ স্থানীয়ভাৱে নিৰ্মাণ আৰু চলায়।

npm runসকলো npm স্ক্ৰিপ্ট চাবলৈ চলাওক ।

আমাৰ আৰম্ভণি প্ৰকল্পৰ সৈতে npm ৰ জৰিয়তে Bootstrap ৰ সৈতে আৰম্ভ কৰক! আপোনাৰ নিজৰ npm প্ৰকল্পত Bootstrap কেনেকৈ নিৰ্মাণ আৰু স্বনিৰ্বাচিত কৰিব লাগে চাবলৈ twbs/bootstrap-npm-starter সাঁচ ভঁৰাললৈ যাওক । Sass কমপাইলাৰ, স্বয়ংপ্ৰিফিক্সাৰ, Stylelint, PurgeCSS, আৰু বুটষ্ট্ৰেপ আইকনসমূহ অন্তৰ্ভুক্ত কৰে।

ছাছ

Bootstrap v4 এ আমাৰ Sass উৎস নথিপত্ৰসমূহক CSS নথিপত্ৰসমূহত (আমাৰ নিৰ্মাণ প্ৰক্ৰিয়াত অন্তৰ্ভুক্ত) কম্পাইল কৰাৰ বাবে Node Sass ব্যৱহাৰ কৰে। আপোনাৰ নিজৰ সম্পত্তি পাইপলাইন ব্যৱহাৰ কৰি Sass কম্পাইল কৰাৰ সময়ত একে সৃষ্টি কৰা CSS ৰ সৈতে শেষ কৰিবলে, আপুনি এটা Sass কমপাইলাৰ ব্যৱহাৰ কৰিব লাগিব যি অন্ততঃ ন'ড Sass এ কৰা বৈশিষ্ট্যসমূহ সমৰ্থন কৰে। এইটো মন কৰিবলগীয়া কাৰণ ২৬ অক্টোবৰ, ২০২০ৰ পৰা, LibSass আৰু ইয়াৰ ওপৰত নিৰ্মিত পেকেইজসমূহ—ন'ড Sass অন্তৰ্ভুক্ত কৰি— অবিকল্পিত ।

যদি আপুনি নতুন Sass বৈশিষ্ট্যসমূহ বা নতুন CSS প্ৰামাণিকসমূহৰ সৈতে সুসংগততাৰ প্ৰয়োজন, Dart Sass এতিয়া Sass ৰ প্ৰাথমিক প্ৰণয়ন আৰু এটা JavaScript API সমৰ্থন কৰে যি Node Sass ৰ সৈতে সম্পূৰ্ণৰূপে সুসংগত (Dart Sass ৰ GitHub পৃষ্ঠাত তালিকাভুক্ত কেইটামান ব্যতিক্ৰমৰ সৈতে )।

আমি ব্ৰাউজাৰ ৰাউণ্ডিঙৰ সৈতে সমস্যা ৰোধ কৰিবলৈ Sass ৰাউণ্ডিং নিখুঁততা 6 লৈ বৃদ্ধি কৰোঁ (অবিকল্পিতভাৱে, ন'ড Sass ত ই 5)। যদি আপুনি Dart Sass ব্যৱহাৰ কৰে এইটো আপুনি সামঞ্জস্য কৰিবলগীয়া কিবা এটা নহ'ব, কাৰণ সেই কমপাইলাৰে 10 ৰ এটা ঘূৰণীয়া নিখুঁততা ব্যৱহাৰ কৰে আৰু কাৰ্য্যক্ষমতাৰ কাৰণে ইয়াক সামঞ্জস্য কৰাৰ অনুমতি নিদিয়ে।

স্বয়ং উপসৰ্গ

বুটষ্ট্ৰেপে নিৰ্মাণৰ সময়ত কিছুমান CSS বৈশিষ্ট্যসমূহত বিক্ৰেতা উপসৰ্গসমূহ স্বয়ংক্ৰিয়ভাৱে যোগ কৰিবলে Autoprefixer (আমাৰ নিৰ্মাণ প্ৰক্ৰিয়াত অন্তৰ্ভুক্ত) ব্যৱহাৰ কৰে। তেনে কৰিলে আমাৰ CSS ৰ মূল অংশসমূহ এবাৰ লিখিবলৈ অনুমতি দি আমাৰ সময় আৰু ক'ড ৰাহি হয় আৰু v3 ত পোৱাৰ দৰে ভেণ্ডৰ মিক্সিনৰ প্ৰয়োজনীয়তা নাইকিয়া হয়।

আমি আমাৰ GitHub ভঁৰালৰ ভিতৰত এটা পৃথক ফাইলত Autoprefixer ৰ যোগেদি সমৰ্থিত ব্ৰাউজাৰসমূহৰ তালিকা ৰক্ষণাবেক্ষণ কৰোঁ। বিৱৰণৰ বাবে .browserslistrc চাওক ।

স্থানীয় নথিপত্ৰ

আমাৰ আলেখ্যন স্থানীয়ভাৱে চলাবলৈ Hugo ৰ ব্যৱহাৰৰ প্ৰয়োজন, যি hugo-bin npm সৰঞ্জামৰ যোগেদি সংস্থাপন কৰা হয় । হুগো হৈছে এটা ব্লাইজলি দ্ৰুত আৰু যথেষ্ট সম্প্ৰসাৰণযোগ্য ষ্টেটিক চাইট জেনেৰেটৰ যিয়ে আমাক প্ৰদান কৰে: মূল অন্তৰ্ভুক্ত, মাৰ্কডাউন-ভিত্তিক ফাইলসমূহ, সাঁচসমূহ, আৰু অধিক। ইয়াক কেনেকৈ আৰম্ভ কৰিব পাৰি ইয়াত দেখুওৱা হৈছে:

  1. সকলো নিৰ্ভৰশীলতা সংস্থাপন কৰিবলে ওপৰৰ সঁজুলি প্ৰতিষ্ঠাৰ মাজেৰে চলাওক ।
  2. ৰূট /bootstrapডাইৰেকটৰীৰ পৰা, npm run docs-serveআদেশ শাৰীত চলাওক।
  3. http://localhost:9001/আপোনাৰ ব্ৰাউজাৰত খোলক , আৰু voilà.

ইয়াৰ আলেখ্যন পঢ়ি Hugo ব্যৱহাৰ কৰাৰ বিষয়ে অধিক শিকিব ।

সমস্যা সমাধান কৰা

আপুনি নিৰ্ভৰশীলতাসমূহ সংস্থাপন কৰাৰ সৈতে সমস্যাৰ সন্মুখীন হ'লে, সকলো পূৰ্বৱৰ্তী নিৰ্ভৰশীলতা সংস্কৰণ (গোলকীয় আৰু স্থানীয়) আনইনস্টল কৰক । তাৰ পিছত, পুনৰ চলাওক npm install.