Webpack uye bundlers
Dzidza maitiro ekusanganisa Bootstrap mupurojekiti yako uchishandisa Webpack kana mamwe mabundle.
Kuisa Bootstrap
Isa bootstrap seNode.js module uchishandisa npm.
Kupinza JavaScript
Ngenisa Bootstrap's JavaScript nekuwedzera iyi mutsara kunzvimbo yekupinda yeapp yako (kazhinji index.js
kana app.js
):
import 'bootstrap';
// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';
Neimwe nzira, kana uchingoda mashoma emaplugins edu, unogona kupinza maplugins ega sezvinodiwa:
import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
Bootstrap inoenderana nePopper , iyo inotsanangurwa peerDependencies
mumudziyo. Izvi zvinoreva kuti iwe uchafanirwa kuve nechokwadi chekuwedzera kune yako package.json
kushandisa npm install @popperjs/core
.
Importing Styles
Kupinza Precompiled Sass
Kuti unakirwe neiyo yakazara kugona kweBootstrap uye kuigadzirisa kune zvaunoda, shandisa iyo sosi mafaera sechikamu chepurojekiti yako yekuunganidza maitiro.
Kutanga, gadzira yako _custom.scss
uye uishandise kupfuudza iyo yakavakirwa-mukati tsika zvinosiyana . Zvadaro, shandisa yako huru Sass faira kupinza yako tsika dzakasiyana, inoteverwa neBootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Kuti Bootstrap iunganidze, ita shuwa kuti iwe unoisa uye shandisa inodiwa inotakura: sass-loader , postcss-loader ne Autoprefixer . Nekuseta kushoma, yako webpack config inofanira kusanganisira mutemo uyu kana zvakafanana:
// ...
{
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'
}]
}
// ...
Kupinza Yakaunganidzwa CSS
Neimwe nzira, unogona kushandisa Bootstrap's yakagadzirira-kushandisa-CSS nekungowedzera iyi mutsara kunzvimbo yekupinda purojekiti yako:
import 'bootstrap/dist/css/bootstrap.min.css';
Mune ino kesi unogona kushandisa mutemo wako uripo css
pasina chero yakakosha shanduko kune webpack config, kunze kwekunge iwe usingade sass-loader
chete style-loader uye css-loader .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...