वेबपैक आ बंडलर के बारे में बतावल गइल बा

बूटस्ट्रैप के इंस्टॉल कइल जा रहल बा

npm के उपयोग करके Node.js मॉड्यूल के रूप में बूटस्ट्रैप इंस्टॉल करीं ।

जावास्क्रिप्ट के आयात कइल जा रहल बा

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

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

एकरे अलावा, अगर रउआँ के खाली हमनी के कुछ प्लगइन सभ के जरूरत बा, त रउआँ जरूरत के हिसाब से प्लगइन सभ के अलग-अलग आयात क सकत बानी :

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

बूटस्ट्रैप पॉपर पर निर्भर करेला , जवन 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'
      ]
    }
  ]
}
// ...