ওয়েবপ্যাক

ওয়েবপ্যাক 3 ব্যবহার করে আপনার প্রকল্পে বুটস্ট্র্যাপ কীভাবে অন্তর্ভুক্ত করবেন তা শিখুন।

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

npm ব্যবহার করে Node.js মডিউল হিসাবে বুটস্ট্র্যাপ ইনস্টল করুন ।

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

আপনার অ্যাপের এন্ট্রি পয়েন্টে এই লাইনটি যোগ করে বুটস্ট্র্যাপের জাভাস্ক্রিপ্ট আমদানি করুন (সাধারণত index.jsবা app.js):

import 'bootstrap';

বিকল্পভাবে, আপনি প্রয়োজন অনুযায়ী পৃথকভাবে প্লাগইন আমদানি করতে পারেন :

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

বুটস্ট্র্যাপ jQuery এবং Popper এর উপর নির্ভরশীল , এগুলিকে এইভাবে সংজ্ঞায়িত করা হয়েছে peerDependencies, এর মানে হল যে আপনাকে আপনার package.jsonব্যবহারে এগুলি দুটি যোগ করতে হবে npm install --save jquery popper.js।

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

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

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

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

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

বুটস্ট্র্যাপ কম্পাইল করার জন্য, নিশ্চিত করুন যে আপনি প্রয়োজনীয় লোডারগুলি ইনস্টল এবং ব্যবহার করেছেন: sass- loader , postcss-loader Autoprefixer সহ । ন্যূনতম সেটআপের সাথে, আপনার ওয়েবপ্যাক কনফিগারে এই নিয়ম বা অনুরূপ অন্তর্ভুক্ত করা উচিত:

  ...
  {
    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 ব্যবহার করতে পারেন:

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

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

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