حزمة الويب
تعرف على كيفية تضمين Bootstrap في مشروعك باستخدام Webpack 3.
قم بتثبيت bootstrap كوحدة Node.js باستخدام npm.
قم باستيراد JavaScript الخاص بـ Bootstrap عن طريق إضافة هذا السطر إلى نقطة دخول تطبيقك (عادةً index.js
أو app.js
):
بدلاً من ذلك ، يمكنك استيراد المكونات الإضافية بشكل فردي حسب الحاجة:
يعتمد Bootstrap على jQuery و Popper ، ويتم تعريفهما على أنهما peerDependencies
، وهذا يعني أنه سيتعين عليك التأكد من إضافة كليهما إلى package.json
استخدامك npm install --save jquery popper.js
.
لاحظ أنه إذا اخترت استيراد المكونات الإضافية بشكل فردي ، فيجب عليك أيضًا تثبيت أداة تحميل الصادرات
للاستمتاع بالإمكانيات الكاملة لـ Bootstrap وتخصيصه حسب احتياجاتك ، استخدم الملفات المصدر كجزء من عملية تجميع مشروعك.
أولاً ، قم بإنشاء الخاص بك _custom.scss
واستخدمه لتجاوز المتغيرات المخصصة المضمنة . بعد ذلك ، استخدم ملف sass الرئيسي لاستيراد متغيراتك المخصصة ، متبوعًا بـ Bootstrap:
لتجميع Bootstrap ، تأكد من تثبيت واستخدام اللوادر المطلوبة: sass- loader ، postcss-loader with Autoprefixer . مع الحد الأدنى من الإعداد ، يجب أن يتضمن تكوين حزمة الويب هذه القاعدة أو ما شابهها:
بدلاً من ذلك ، يمكنك استخدام ملف css الجاهز للاستخدام في Bootstrap عن طريق إضافة هذا السطر ببساطة إلى نقطة دخول مشروعك:
في هذه الحالة ، يمكنك استخدام القاعدة الحالية css
بدون أي تعديلات خاصة لتكوين حزمة الويب باستثناء أنك لست بحاجة sass-loader
فقط إلى محمل النمط ومحمل css .