حزمة الويب

تعرف على كيفية تضمين Bootstrap في مشروعك باستخدام Webpack.

تثبيت Bootstrap

قم بتثبيت bootstrap كوحدة Node.js باستخدام npm.

استيراد JavaScript

قم باستيراد JavaScript الخاص بـ Bootstrap عن طريق إضافة هذا السطر إلى نقطة دخول تطبيقك (عادةً index.jsأو app.js):

import 'bootstrap';

بدلاً من ذلك ، يمكنك استيراد المكونات الإضافية بشكل فردي حسب الحاجة:

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...

يعتمد Bootstrap على jQuery و Popper ، ويتم تعريفهما على أنهما peerDependencies، وهذا يعني أنه سيتعين عليك التأكد من إضافة كليهما إلى package.jsonاستخدامك npm install --save jquery popper.js.

استيراد الأنماط

استيراد Sass المترجمة مسبقا

للاستمتاع بالإمكانيات الكاملة لـ Bootstrap وتخصيصه حسب احتياجاتك ، استخدم الملفات المصدر كجزء من عملية تجميع مشروعك.

أولاً ، قم بإنشاء الخاص بك _custom.scssواستخدمه لتجاوز المتغيرات المخصصة المضمنة . بعد ذلك ، استخدم ملف Sass الرئيسي لاستيراد متغيراتك المخصصة ، متبوعًا بـ Bootstrap:

@import "custom";
@import "~bootstrap/scss/bootstrap";

لتجميع Bootstrap ، تأكد من تثبيت واستخدام اللوادر المطلوبة: sass- loader ، postcss-loader with Autoprefixer . مع الحد الأدنى من الإعداد ، يجب أن يتضمن تكوين حزمة الويب هذه القاعدة أو ما شابهها:

...
{
  test: /\.(scss)$/,
  use: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
},
...

استيراد ملفات CSS المجمعة

بدلاً من ذلك ، يمكنك استخدام CSS الجاهزة للاستخدام من Bootstrap عن طريق إضافة هذا السطر ببساطة إلى نقطة دخول مشروعك:

import 'bootstrap/dist/css/bootstrap.min.css';

في هذه الحالة ، يمكنك استخدام القاعدة الحالية cssبدون أي تعديلات خاصة لتكوين حزمة الويب ، باستثناء أنك لست بحاجة sass-loaderفقط إلى محمل النمط ومحمل css .

...
module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }
  ]
}
...