वेबपैक दा

वेबपैक 3 दा इस्तेमाल करदे होई अपने प्रोजेक्ट च बूटस्ट्रैप गी किस चाल्ली शामल करना सिक्खो।

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

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

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

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

import 'bootstrap';

वैकल्पिक रूप कन्नै, तुस जरूरत मताबक प्लगइन्स गी व्यक्तिगत रूप कन्नै आयात करी सकदे ओ:

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

बूटस्ट्रैप jQuery ते Popper पर निर्भर करदा ऐ , एह् इस चाल्ली परिभाशत कीते गेदे न , इसदा मतलब ऐ जे तुसेंगी अपने इस्तेमाल peerDependenciesच इन्हें दोनें गी जोड़ना सुनिश्चित करना होग .package.jsonnpm 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 post css actions
      options: {
        plugins: function () { // post css plugins, can be exported to postcss.config.js
          return [
            require('precss'),
            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']
      }
    ]
  }
  ...