ওয়েবপ্যাক এবং বান্ডলার

বুটস্ট্র্যাপ ইনস্টল করা হচ্ছে

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';

বুটস্ট্র্যাপ পপারের উপর নির্ভর করে , যা peerDependenciesসম্পত্তিতে নির্দিষ্ট করা আছে। package.jsonএর মানে হল যে আপনাকে এটি আপনার ব্যবহারে যোগ করার বিষয়টি নিশ্চিত করতে হবে npm install @popperjs/core।

শৈলী আমদানি করা হচ্ছে

Precompiled Sass আমদানি করা হচ্ছে

বুটস্ট্র্যাপের সম্পূর্ণ সম্ভাবনা উপভোগ করতে এবং এটিকে আপনার প্রয়োজন অনুসারে কাস্টমাইজ করতে, আপনার প্রকল্পের বান্ডলিং প্রক্রিয়ার একটি অংশ হিসাবে সোর্স ফাইলগুলি ব্যবহার করুন।

প্রথমে, আপনার নিজের তৈরি করুন এবং অন্তর্নির্মিত কাস্টম ভেরিয়েবলগুলিকে_custom.scss ওভাররাইড করতে এটি ব্যবহার করুন ৷ তারপর, আপনার কাস্টম ভেরিয়েবলগুলি আমদানি করতে আপনার প্রধান Sass ফাইলটি ব্যবহার করুন, বুটস্ট্র্যাপ দ্বারা অনুসরণ করুন:

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

বুটস্ট্র্যাপ কম্পাইল করার জন্য, নিশ্চিত করুন যে আপনি প্রয়োজনীয় লোডারগুলি ইনস্টল এবং ব্যবহার করেছেন: sass- loader , postcss-loader 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 ব্যবহার করতে পারেন:

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

cssএই ক্ষেত্রে আপনি ওয়েবপ্যাক কনফিগারেশনে কোনো বিশেষ পরিবর্তন ছাড়াই আপনার বিদ্যমান নিয়মটি ব্যবহার করতে পারেন , sass-loaderশুধুমাত্র স্টাইল-লোডার এবং css- লোডারের প্রয়োজন নেই ।

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