વેબપેક અને બંડલર્સ
વેબપેક અથવા અન્ય બંડલરનો ઉપયોગ કરીને તમારા પ્રોજેક્ટમાં બુટસ્ટ્રેપનો સમાવેશ કેવી રીતે કરવો તે જાણો.
બુટસ્ટ્રેપ ઇન્સ્ટોલ કરી રહ્યું છે
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
.
આયાત શૈલીઓ
પ્રીકમ્પાઇલ્ડ Sass આયાત કરી રહ્યું છે
બુટસ્ટ્રેપની સંપૂર્ણ સંભાવનાનો આનંદ માણવા અને તેને તમારી જરૂરિયાતો અનુસાર કસ્ટમાઇઝ કરવા માટે, તમારા પ્રોજેક્ટની બંડલિંગ પ્રક્રિયાના ભાગ રૂપે સ્રોત ફાઇલોનો ઉપયોગ કરો.
પ્રથમ, તમારું પોતાનું બનાવો અને બિલ્ટ-ઇન કસ્ટમ ચલોને_custom.scss
ઓવરરાઇડ કરવા માટે તેનો ઉપયોગ કરો . પછી, તમારા કસ્ટમ ચલો આયાત કરવા માટે તમારી મુખ્ય Sass ફાઇલનો ઉપયોગ કરો, ત્યારબાદ બુટસ્ટ્રેપ:
@import "custom";
@import "~bootstrap/scss/bootstrap";
કમ્પાઇલ કરવા માટે બુટસ્ટ્રેપ માટે, ખાતરી કરો કે તમે જરૂરી લોડર ઇન્સ્ટોલ અને ઉપયોગ કરો છો: sass-loader , postcss-loader Autoprefixer સાથે . ન્યૂનતમ સેટઅપ સાથે, તમારા વેબપૅક રૂપરેખામાં આ નિયમ અથવા તેના સમાનનો સમાવેશ થવો જોઈએ:
// ...
{
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'
]
}
]
}
// ...