वेबपॅक आनी बंडलर

बूटस्ट्रॅप स्थापन करप

npm वापरून bootstrap Node.js मॉड्यूल म्हणून प्रतिष्ठापीत करात.

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

तुमच्या ऍप्लिकेशनाच्या प्रवेश बिंदूचेर ही ओळ जोडून बूटस्ट्रॅपाची जावास्क्रिप्ट आयात करात (सादारणपणान index.jsवा app.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';

बूटस्ट्रॅप Popper चेर आदारीत आसा , जें peerDependenciesगुणधर्मांत निर्देशीत केलां. package.jsonहाचो अर्थ तुमकां तुमच्या वापरांत जोडपाची खात्री करची पडटली npm install @popperjs/core.

शैली आयात करप

पूर्वसंकलित सॅस आयात करप

Bootstrap ची पुराय क्षमता भोगपाक आनी तुमच्या गरजे प्रमाणें अनुकूल करपाक, तुमच्या प्रकल्पाच्या बंडलिंग प्रक्रियेचो एक भाग म्हूण स्त्रोत फायली वापरात.

पयलीं, तुमचें स्वताचें तयार करात _custom.scssआनी ताचो वापर बिल्ट-इन सानुकूल चड-उणें ओव्हररायड करपाक . मागीर, तुमचीं सानुकूल चड आयात करपाक तुमची मुखेल Sass फायल वापरात, ताचे उपरांत Bootstrap:

@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 आयात करप

पर्यायीपणान, तुमच्या प्रकल्पाच्या प्रवेश बिंदूचेर फकत ही ओळ जोडून तुमी Bootstrap चो वापरपाक तयार आशिल्लो CSS वापरूं येता:

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

ह्या प्रकरणांत तुमी तुमचो सद्याचो नेम वापरूं येता for csswebpack config कडेन कसलेच खाशेले बदल करिनासतना, सोडल्यार तुमकां sass-loaderफकत style-loader आनी css-loader ची गरज ना .

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