वेबपॅक

Webpack 3 वापरून तुमच्या प्रोजेक्टमध्ये बूटस्ट्रॅपचा समावेश कसा करायचा ते शिका.

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

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

JavaScript आयात करत आहे

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

import 'bootstrap';

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

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

बूटस्ट्रॅप हे jQuery आणि Popper वर अवलंबून आहे , हे असे परिभाषित केले आहे , याचा अर्थ असा की तुम्हाला ते दोन्ही तुमच्या वापरात peerDependenciesजोडण्याची खात्री करावी लागेल .package.jsonnpm install --save jquery popper.js

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

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

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

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

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

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

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

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

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

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

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