Webpack na vifurushi
Jifunze jinsi ya kujumuisha Bootstrap katika mradi wako kwa kutumia Webpack au vifurushi vingine.
Kufunga Bootstrap
Sakinisha bootstrap kama moduli ya Node.js kwa kutumia npm.
Inaleta JavaScript
Ingiza JavaScript ya Bootstrap kwa kuongeza laini hii kwenye sehemu ya kuingilia ya programu yako (kwa kawaida index.js
au app.js
):
// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';
Vinginevyo, ikiwa unahitaji tu programu-jalizi zetu chache, unaweza kuagiza programu-jalizi kibinafsi kama inahitajika:
import Alert from 'bootstrap/js/dist/alert';
...
Bootstrap inategemea Popper , ambayo imeainishwa kwenye peerDependencies
mali. Hii inamaanisha kuwa itabidi uhakikishe kuiongeza kwenye package.json
matumizi yako npm install @popperjs/core
.
Mitindo ya Kuagiza
Inaleta Sass Iliyoundwa Awali
Ili kufurahia uwezo kamili wa Bootstrap na kuibinafsisha kulingana na mahitaji yako, tumia faili chanzo kama sehemu ya mchakato wa kuunganisha mradi wako.
Kwanza, unda yako mwenyewe _custom.scss
na uitumie kubatilisha anuwai maalum zilizojumuishwa . Kisha, tumia faili yako kuu ya Sass kuagiza anuwai zako maalum, ikifuatiwa na Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Ili Bootstrap ikusanye, hakikisha umesakinisha na kutumia vipakiaji vinavyohitajika: sass-loader , postcss-loader na Autoprefixer . Kwa usanidi mdogo, usanidi wako wa pakiti ya wavuti unapaswa kujumuisha sheria hii au sawa:
// ...
{
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'
}]
}
// ...
Inaleta CSS Iliyokusanywa
Vinginevyo, unaweza kutumia CSS ya Bootstrap iliyo tayari kutumia kwa kuongeza tu laini hii kwenye sehemu ya kuingilia ya mradi wako:
import 'bootstrap/dist/css/bootstrap.min.css';
Katika kesi hii unaweza kutumia sheria yako iliyopo css
bila marekebisho yoyote maalum kwa usanidi wa pakiti za wavuti, isipokuwa hauitaji sass-loader
tu style-loader na css-loader .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...