تضمين Bootstrap باستخدام Webpack

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

تثبيت Bootstrap

استخدم npm لتثبيت Bootstrap بصيغة وِحدة Node.js.

استيراد JavaScript

استورد ملفات JavaScript في Bootstrap بإضافة السطر التالي إلى مَدخَل تطبيقك (عادة index.js أو app.js)

import 'bootstrap';

يمكنك بدلا من ذلك استيراد المُلحقات Plugins حسب الحاجة:

import 'bootstrap/js/dist/util'; 
import 'bootstrap/js/dist/dropdown';

يعتمد Bootstrap على jQuery و Popper المُعرَّفة على أنها peerDependencies، بمعنى أنه يجب عليك التأكد من إضافة الاثنين إلى الملف package.json بالأمر:

npm install --save jquery popper.js

تنبيه: قد تحتاج إن اخترت استيراد مُلحقات على حدة إلى تثبيت exports-loader.

استيراد التنسيقات

استيراد ملفات Sass المُجمَّعة مسبقًا

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

أنشئ أولًا الملف ‎_custom.scss واستخدمه لإبطال الخيارات المبدئية؛ ثم استخدم ملف Sass الأساسي لاستيراد متغيّراتك المخصَّصة متبوعة بإطار العمل Bootstrap:

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

تأكّد من تثبيت المُحمِّلات (Loaders) المطلوبة واستخدامها لكي يُجمَّع Bootstrap، وهي: sass-loader و postcss-loader مع Autoprefixer. تحوي إعدادات Webpack الدنيا القاعدة التاليّة أو ما يشبهها:

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

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

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

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

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

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

مصادر

• صفحة Webpack في توثيق Bootstrap.