वेबपॅक हें नांव

Webpack 3 वापरून तुमच्या प्रकल्पांत Bootstrap कसो आस्पाव करचो तें शिकात.

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

npm वापरून bootstrap 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

शैली आयात करप

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

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

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

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

पर्यायीपणान, तुमच्या प्रकल्पाच्या प्रवेश बिंदूचेर फकत ही ओळ जोडून तुमी 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']
      }
    ]
  }
  ...