वेबपैक

वेबपैक 3 का उपयोग करके अपने प्रोजेक्ट में बूटस्ट्रैप को शामिल करने का तरीका जानें।

बूटस्ट्रैप स्थापित करना

npm का उपयोग करके बूटस्ट्रैप को Node.js मॉड्यूल के रूप में स्थापित करें।

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

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

import 'bootstrap';

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

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

बूटस्ट्रैप jQuery और पॉपर पर निर्भर है , इन्हें इस रूप में परिभाषित किया गया है , इसका मतलब है कि आपको उन दोनों को अपने उपयोग peerDependenciesमें जोड़ना सुनिश्चित करना होगा ।package.jsonnpm install --save jquery popper.js

शैलियाँ आयात करना

प्रीकंपील्ड सैस आयात करना

बूटस्ट्रैप की पूरी क्षमता का आनंद लेने और इसे अपनी आवश्यकताओं के अनुसार अनुकूलित करने के लिए, अपने प्रोजेक्ट की बंडलिंग प्रक्रिया के एक भाग के रूप में स्रोत फ़ाइलों का उपयोग करें।

सबसे पहले, अपना खुद का बनाएं और अंतर्निहित कस्टम चर_custom.scss को ओवरराइड करने के लिए इसका इस्तेमाल करें । फिर, बूटस्ट्रैप के बाद अपने कस्टम चर आयात करने के लिए अपनी मुख्य एसएएस फ़ाइल का उपयोग करें:

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

बूटस्ट्रैप को संकलित करने के लिए, सुनिश्चित करें कि आप आवश्यक लोडर स्थापित और उपयोग करते हैं: sass-loader , postcss-loader 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
    }]
  },
  ...

संकलित सीएसएस आयात करना

वैकल्पिक रूप से, आप बूटस्ट्रैप के उपयोग के लिए तैयार सीएसएस का उपयोग केवल इस लाइन को अपने प्रोजेक्ट के प्रवेश बिंदु पर जोड़कर कर सकते हैं:

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

इस मामले में आप अपने मौजूदा नियम का उपयोग cssबिना किसी विशेष संशोधन के वेबपैक कॉन्फ़िगरेशन में कर सकते हैं, सिवाय इसके कि आपको sass-loaderकेवल स्टाइल-लोडर और सीएसएस-लोडर की आवश्यकता नहीं है ।

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