वेबपैक के बा

वेबपैक के इस्तेमाल से अपना प्रोजेक्ट में बूटस्ट्रैप के शामिल करे के तरीका सीखीं।

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

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

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

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

import 'bootstrap';

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

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

बूटस्ट्रैप jQuery आ Popper पर निर्भर करे ला , जे प्रॉपर्टी में निर्दिष्ट बाड़ें peerDependencies; package.jsonमतलब कि रउरा एह दुनु के अपना इस्तेमाल में जोड़ल सुनिश्चित करे के पड़ी npm install --save jquery popper.js.

शैली के आयात कइल जा रहल बा

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

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

सबसे पहिले आपन बनाईं आ एकर इस्तेमाल बिल्ट-इन कस्टम वैरिएबल_custom.scss के ओवरराइड करे खातिर करीं . एकरा बाद, अपना कस्टम चर के आयात करे खातिर अपना मुख्य Sass फाइल के इस्तेमाल करीं, ओकरा बाद बूटस्ट्रैप:

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

बूटस्ट्रैप के संकलित करे खातिर, सुनिश्चित करीं कि रउआँ जरूरी लोडर सभ के इंस्टॉल करीं आ इस्तेमाल करीं: sass-loader , postcss-loader with Autoprefixer . न्यूनतम सेटअप के साथ, आपके वेबपैक कॉन्फ़िगरेशन में ई नियम या अइसने कुछ शामिल होखे के चाहीं:

...
{
  test: /\.(scss)$/,
  use: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
},
...

संकलित सीएसएस के आयात कइल जा रहल बा

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

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

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

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