মূল বিষয়বস্তুলৈ এৰি যাওক নথিপত্ৰ নেভিগেচনলৈ এৰি যাওক
in English

ৱেবপেক আৰু বাণ্ডলাৰ

Webpack বা অন্য বাণ্ডলাৰ ব্যৱহাৰ কৰি আপোনাৰ প্ৰকল্পত Bootstrap কেনেকৈ অন্তৰ্ভুক্ত কৰিব লাগে শিকিব।

বুটষ্ট্ৰেপ সংস্থাপন কৰা

bootstrap এটা Node.js মডিউল হিচাপে npm ব্যৱহাৰ কৰি সংস্থাপন কৰক ।

জাভাস্ক্রিপ্ট আমদানি কৰা হৈছে

আপোনাৰ এপৰ প্ৰৱেশ বিন্দুত এই শাৰী যোগ কৰি Bootstrap ৰ JavaScript আমদানি কৰক (সাধাৰণতে 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 আমদানি কৰা হৈছে

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

প্ৰথমে, আপোনাৰ নিজৰ সৃষ্টি কৰক _custom.scssআৰু ইয়াক ব্যৱহাৰ কৰক অন্তৰ্নিৰ্মিত স্বনিৰ্বাচিত চলকসমূহ অভাৰৰাইড কৰিবলে । তাৰ পিছত, আপোনাৰ স্বনিৰ্বাচিত চলকসমূহ আমদানি কৰিবলে আপোনাৰ মূল Sass নথিপত্ৰ ব্যৱহাৰ কৰক, তাৰ পিছত Bootstrap:

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

Bootstrap কম্পাইল কৰিবলে, নিশ্চিত কৰক যে আপুনি প্ৰয়োজনীয় লোডাৰসমূহ সংস্থাপন আৰু ব্যৱহাৰ কৰে: sass- loader , postcss-loader Autoprefixer সৈতে । নূন্যতম প্ৰতিষ্ঠাৰ সৈতে, আপোনাৰ webpack বিন্যাসে এই নিয়ম বা অনুৰূপ অন্তৰ্ভুক্ত কৰিব লাগে:

// ...
{
  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 আমদানি কৰা হৈছে

বৈকল্পিকভাৱে, আপুনি Bootstrap ৰ ব্যৱহাৰৰ বাবে প্ৰস্তুত CSS ব্যৱহাৰ কৰিব পাৰে আপোনাৰ প্ৰকল্পৰ প্ৰৱেশ বিন্দুত এই শাৰী যোগ কৰি:

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

এই ক্ষেত্ৰত আপুনি আপোনাৰ বৰ্ত্তমানৰ নিয়ম ব্যৱহাৰ কৰিব পাৰে csswebpack config ৰ কোনো বিশেষ পৰিবৰ্তন নকৰাকৈ, বাদে আপুনি sass-loaderকেৱল style-loader আৰু css-loader ৰ প্ৰয়োজন নাই ।

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