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

बूटस्ट्रैप स्थापित करना

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

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

इस लाइन को अपने ऐप के प्रवेश बिंदु (आमतौर पर या ) में जोड़कर बूटस्ट्रैप की जावास्क्रिप्ट आयात करें :index.jsapp.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।

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

प्रीकंपील्ड सैस आयात करना

बूटस्ट्रैप की पूरी क्षमता का आनंद लेने और इसे अपनी आवश्यकताओं के अनुसार अनुकूलित करने के लिए, अपने प्रोजेक्ट की बंडलिंग प्रक्रिया के एक भाग के रूप में स्रोत फ़ाइलों का उपयोग करें।

सबसे पहले, अपना खुद का बनाएं और अंतर्निहित कस्टम चर_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'
  }]
}
// ...

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

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

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

इस मामले में आप अपने मौजूदा नियम का उपयोग cssबिना किसी विशेष संशोधन के वेबपैक कॉन्फ़िगरेशन में कर सकते हैं, सिवाय इसके कि आपको sass-loaderकेवल स्टाइल-लोडर और सीएसएस-लोडर की आवश्यकता नहीं है ।

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