Webpack and bundlers
Webpack ياكى باشقا بولاقلارنى ئىشلىتىپ Bootstrap نى تۈرىڭىزگە قانداق كىرگۈزۈشنى ئۆگىنىۋېلىڭ.
Bootstrap نى ئورنىتىش
Npm ئارقىلىق bootstrap نى Node.js مودۇلى قىلىپ قاچىلاڭ.
JavaScript ئەكىرىش
بۇ قۇرنى ئەپنىڭ كىرىش نۇقتىسىغا (ئادەتتە ياكى ) قوشۇش ئارقىلىق Bootstrap نىڭ 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';
...
Bootstrap مۈلۈكتە كۆرسىتىلگەن Popper غا باغلىق . بۇ سىزنىڭ ئۇنى ئىشلىتىشىڭىزگە peerDependencies
كاپالەتلىك قىلىشىڭىز كېرەكلىكىدىن دېرەك بېرىدۇ .package.json
npm install @popperjs/core
ئۇسلۇبلارنى ئەكىرىش
ئالدىن تەييارلانغان ساسنى ئەكىرىش
Bootstrap نىڭ تولۇق يوشۇرۇن كۈچىدىن بەھرىمەن بولۇش ۋە ئۇنى ئېھتىياجىڭىزغا ماسلاشتۇرۇش ئۈچۈن ، ئەسلى ھۆججەتلەرنى تۈرنىڭ باغلاش جەريانىنىڭ بىر قىسمى سۈپىتىدە ئىشلىتىڭ.
ئالدى بىلەن ، ئۆزىڭىزنىڭكىنى قۇرۇپ ، ئىچىگە قاچىلانغان ئىختىيارى ئۆزگەرگۈچى مىقدارنى_custom.scss
قاپلىۋېتىڭ . ئاندىن ئاساسلىق Sass ھۆججىتىڭىزنى ئىشلىتىپ ئۆزىڭىزنىڭ ئۆزگەرگۈچى مىقدارنى ئەكىرىڭ ، ئاندىن Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
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 نى ئەكىرىش
ئۇنىڭدىن باشقا ، سىز بۇ قۇرنى تۈرىڭىزنىڭ كىرىش نۇقتىسىغا قوشۇش ئارقىلىق Bootstrap نىڭ تەييار CSS نى ئىشلىتەلەيسىز:
import 'bootstrap/dist/css/bootstrap.min.css';
بۇ خىل ئەھۋالدا سىز پەقەت ئۇسلۇب يۈكلىگۈچى ۋە css-css
يۈكلىگۈچىگە ئېھتىياجلىق بولمىسىڭىز ، تور بەت سەپلىمىسىگە ئالاھىدە ئۆزگەرتىش كىرگۈزمەي تۇرۇپ ، ھازىرقى قائىدىڭىزنى ئىشلىتەلەيسىز .sass-loader
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...