ویب پیک اور بنڈلرز

بوٹسٹریپ انسٹال کرنا

npm کا استعمال کرتے ہوئے بوٹسٹریپ کو Node.js ماڈیول کے طور پر انسٹال کریں۔

جاوا اسکرپٹ درآمد کرنا

اس لائن کو اپنے ایپ کے انٹری پوائنٹ میں شامل کرکے بوٹسٹریپ کا جاوا اسکرپٹ درآمد کریں (عام طور پر 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';

بوٹسٹریپ کا انحصار Popper پر ہے، جو کہ peerDependenciesپراپرٹی میں بیان کیا گیا ہے۔ package.jsonاس کا مطلب یہ ہے کہ آپ کو اسے اپنے استعمال میں شامل کرنا یقینی بنانا ہوگا npm install @popperjs/core۔

طرزیں درآمد کرنا

پہلے سے مرتب شدہ Sass درآمد کرنا

بوٹسٹریپ کی مکمل صلاحیت سے لطف اندوز ہونے اور اسے اپنی ضروریات کے مطابق بنانے کے لیے، اپنے پروجیکٹ کے بنڈلنگ کے عمل کے ایک حصے کے طور پر سورس فائلوں کا استعمال کریں۔

سب سے پہلے، اپنا خود بنائیں _custom.scssاور اسے بلٹ ان حسب ضرورت متغیرات کو اوور رائڈ کرنے کے لیے استعمال کریں ۔ پھر، اپنے حسب ضرورت متغیرات کو درآمد کرنے کے لیے اپنی مین Sass فائل کا استعمال کریں، اس کے بعد بوٹسٹریپ:

@import "custom";
@import "~bootstrap/scss/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'
  }]
}
// ...

مرتب شدہ سی ایس ایس درآمد کرنا

متبادل طور پر، آپ بوٹسٹریپ کے استعمال کے لیے تیار سی ایس ایس کو اپنے پروجیکٹ کے انٹری پوائنٹ میں صرف اس لائن کو شامل کر کے استعمال کر سکتے ہیں:

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

اس صورت میں آپ اپنے موجودہ اصول کو ویب پیک کنفیگریشن میں کسی خاص ترمیم کے بغیر استعمال کر سکتے ہیں ، سوائے اس کے کہ آپ کو صرف style-loader اور css-loadercss کی ضرورت نہیں ہے ۔sass-loader

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