حزم الويب والمجمعات
تعرف على كيفية تضمين Bootstrap في مشروعك باستخدام Webpack أو حزم أخرى.
تثبيت Bootstrap
قم بتثبيت bootstrap كوحدة Node.js باستخدام npm.
استيراد JavaScript
قم باستيراد JavaScript الخاص بـ Bootstrap عن طريق إضافة هذا السطر إلى نقطة دخول تطبيقك (عادةً index.js
أو app.js
):
import 'bootstrap';
// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';
بدلاً من ذلك ، إذا كنت تحتاج فقط إلى عدد قليل من المكونات الإضافية الخاصة بنا ، فيمكنك استيراد المكونات الإضافية بشكل فردي حسب الحاجة:
import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
يعتمد Bootstrap على Popper المحدد في peerDependencies
الخاصية. هذا يعني أنه سيتعين عليك التأكد من إضافته إلى package.json
استخدامك npm install @popperjs/core
.
استيراد الأنماط
استيراد Sass المترجمة مسبقا
للاستمتاع بالإمكانيات الكاملة لـ Bootstrap وتخصيصه حسب احتياجاتك ، استخدم الملفات المصدر كجزء من عملية تجميع مشروعك.
أولاً ، قم بإنشاء الخاص بك _custom.scss
واستخدمه لتجاوز المتغيرات المخصصة المضمنة . بعد ذلك ، استخدم ملف Sass الرئيسي لاستيراد متغيراتك المخصصة ، متبوعًا بـ Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
لتجميع Bootstrap ، تأكد من تثبيت واستخدام اللوادر المطلوبة: sass- loader ، postcss-loader with Autoprefixer . مع الحد الأدنى من الإعداد ، يجب أن يتضمن تكوين حزمة الويب هذه القاعدة أو ما شابهها:
// ...
{
test: /\.(scss)$/,
use: [{
// inject CSS to page
loader: 'style-loader'
}, {
// translates CSS into CommonJS modules
loader: 'css-loader'
}, {
// Run postcss actions
loader: 'postcss-loader',
options: {
// `postcssOptions` is needed for postcss 8.x;
// if you use postcss 7.x skip the key
postcssOptions: {
// postcss plugins, can be exported to postcss.config.js
plugins: function () {
return [
require('autoprefixer')
];
}
}
}
}, {
// compiles Sass to CSS
loader: 'sass-loader'
}]
}
// ...
استيراد ملفات CSS المجمعة
بدلاً من ذلك ، يمكنك استخدام CSS الجاهزة للاستخدام من Bootstrap عن طريق إضافة هذا السطر ببساطة إلى نقطة دخول مشروعك:
import 'bootstrap/dist/css/bootstrap.min.css';
في هذه الحالة ، يمكنك استخدام القاعدة الحالية css
بدون أي تعديلات خاصة لتكوين حزمة الويب ، باستثناء أنك لست بحاجة sass-loader
فقط إلى محمل النمط ومحمل css .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...