वेबपैक ते बंडलर

बूटस्ट्रैप इंस्टॉल करना

npm दा इस्तेमाल करदे होई इक Node.js मॉड्यूल दे रूप च बूटस्ट्रैप गी इंस्टॉल करो .

जावास्क्रिप्ट आयात करना

अपने ऐप दे एंट्री बिंदु च इस लाइन गी जोड़ियै बूटस्ट्रैप दी जावास्क्रिप्ट आयात करो (आमतौर पर index.jsजां app.js):

// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';

वैकल्पिक रूप कन्नै, जेकर तुसेंगी सिर्फ साढ़े किश प्लगइन्स दी लोड़ ऐ तां तुस जरूरत मताबक प्लगइन्स गी व्यक्तिगत रूप कन्नै आयात करी सकदे ओ:

import Alert from 'bootstrap/js/dist/alert';
...

बूटस्ट्रैप Popper पर निर्भर करदा ऐ , जेह् ड़ा peerDependenciesसंपत्ति च निर्दिश्ट ऐ. package.jsonइसदा मतलब ऐ जे तुसेंगी इसगी अपने इस्तेमाल च जोड़ना सुनिश्चित करना होग npm install @popperjs/core.

शैलियाँ आयात करना

पूर्व संकलित सस्स आयात करना

बूटस्ट्रैप दी पूरी क्षमता दा मजा लैने ते अपनी जरूरतें दे मताबक इसगी अनुकूलित करने आस्तै, अपने प्रोजेक्ट दी बंडलिंग प्रक्रिया दे हिस्से दे रूप च स्रोत फाइलें दा इस्तेमाल करो.

पैह् ले, अपना बनाओ ते बिल्ट-इन कस्टम चर_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'
  }]
}
// ...

संकलित सीएसएस आयात करना

वैकल्पिक रूप कन्नै, तुस बस इस पंक्ति गी अपने प्रोजेक्ट दे प्रविश्ट बिंदु च जोड़ियै बूटस्ट्रैप दे इस्तेमाल आस्तै तैयार CSS दा इस्तेमाल करी सकदे ओ:

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

इस मामले च तुस अपने मौजूदा नियम दा इस्तेमाल वेबपैक कॉन्फ़िगरेशन च कुसै बी खास बदलाव दे बगैर आस्तै करी सकदे ओ , सिवाय इसदे जे तुसेंगी सिर्फ शैली-लोडर ते css-css लोडर दी लोड़ नेईं ऐ .sass-loader

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