मुख्य सामग्री पर जाउ डॉक्स नेविगेशन पर जाउ
in English

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

वेबपैक या अन्य बंडलर कें उपयोग करयत अपन प्रोजेक्ट मे बूटस्ट्रैप कें शामिल करनाय सीखूं.

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

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';
...

बूटस्ट्रैप 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'
      ]
    }
  ]
}
// ...