वेबपॅक आणि बंडलर्स

बूटस्ट्रॅप स्थापित करत आहे

npm वापरून Node.js मॉड्यूल म्हणून बूटस्ट्रॅप स्थापित करा.

JavaScript आयात करत आहे

ही ओळ तुमच्या अॅपच्या एंट्री पॉइंटमध्ये जोडून बूटस्ट्रॅपची JavaScript आयात करा (सामान्यतः index.jsकिंवा app.js):

// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';

वैकल्पिकरित्या, जर तुम्हाला आमच्या फक्त काही प्लगइनची आवश्यकता असेल, तर तुम्ही आवश्यकतेनुसार स्वतंत्रपणे प्लगइन आयात करू शकता :

import Alert from 'bootstrap/js/dist/alert';
...

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

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

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

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

प्रथम, तुमचे स्वतःचे तयार करा आणि अंगभूत कस्टम व्हेरिएबल्स_custom.scss ओव्हरराइड करण्यासाठी वापरा . त्यानंतर, तुमचे सानुकूल व्हेरिएबल्स आयात करण्यासाठी तुमची मुख्य Sass फाइल वापरा, त्यानंतर बूटस्ट्रॅप:

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

बूटस्ट्रॅप संकलित करण्यासाठी, आपण आवश्यक लोडर स्थापित आणि वापरत असल्याची खात्री करा: sass- loader , Autoprefixer सह postcss -loader . किमान सेटअपसह, तुमच्या वेबपॅक कॉन्फिगरेशनमध्ये हा नियम किंवा तत्सम समाविष्ट असावा:

// ...
{
  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 आयात करत आहे

वैकल्पिकरित्या, तुम्ही तुमच्या प्रोजेक्टच्या एंट्री पॉईंटमध्ये ही ओळ जोडून बूटस्ट्रॅपचा वापरण्यासाठी तयार CSS वापरू शकता:

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

cssया प्रकरणात तुम्ही वेबपॅक कॉन्फिगरेशनमध्ये कोणतेही विशेष बदल न करता तुमचा सध्याचा नियम वापरू शकता , तुम्हाला sass-loaderफक्त style-loader आणि css-loader ची गरज नाही .

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