वेबपॅक आणि बंडलर्स
वेबपॅक किंवा इतर बंडलर वापरून तुमच्या प्रोजेक्टमध्ये बूटस्ट्रॅपचा समावेश कसा करायचा ते शिका.
बूटस्ट्रॅप स्थापित करत आहे
npm वापरून Node.js मॉड्यूल म्हणून बूटस्ट्रॅप स्थापित करा.
JavaScript आयात करत आहे
ही ओळ तुमच्या अॅपच्या एंट्री पॉइंटमध्ये जोडून बूटस्ट्रॅपची JavaScript आयात करा (सामान्यतः 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';
बूटस्ट्रॅप पॉपरवर अवलंबून आहे , जे 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'
]
}
]
}
// ...