Webpack ne bundlers
Yiga engeri y'okussaamu Bootstrap mu pulojekiti yo ng'okozesa Webpack oba bundlers endala.
Okuteeka Bootstrap mu nkola
Teeka bootstrap nga module ya Node.js nga okozesa npm.
Okuyingiza JavaScript
Yingiza JavaScript ya Bootstrap ng'ogattako layini eno ku kifo app yo w'eyingira (ebiseera ebisinga index.js
oba app.js
):
import 'bootstrap';
// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';
Ekirala, bw’oba weetaaga plugins zaffe ntono zokka, oyinza okuyingiza plugins kinnoomu nga bwe kyetaagisa:
import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
Bootstrap esinziira ku Popper , eragiddwa mu peerDependencies
kintu. Kino kitegeeza nti ojja kuba olina okukakasa nti ogigattako ku package.json
nkozesa yo npm install @popperjs/core
.
Okuyingiza Emisono
Okuyingiza Sass Ekoleddwa Nga Tennakungula
Okunyumirwa obusobozi bwonna obwa Bootstrap n'okugilongoosa okusinziira ku byetaago byo, kozesa fayiro z'ensibuko ng'ekitundu ku nkola ya pulojekiti yo ey'okugatta.
Okusooka, tonda eyiyo _custom.scss
era ogikozese okusazaamu enkyukakyuka ez’ennono ezizimbibwamu . Oluvannyuma, kozesa fayiro yo enkulu eya Sass okuyingiza enkyukakyuka zo eza bulijjo, oluvannyuma Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Bootstrap okusobola okukung'aanya, kakasa nti oteeka era okozesa ebitikka ebyetaagisa: sass-loader , postcss-loader ne Autoprefixer . Nga olina okuteekawo okutono, webpack config yo erina okubeeramu etteeka lino oba erifaananako bwetyo:
// ...
{
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'
}]
}
// ...
Okuyingiza CSS Ekung’aanyiziddwa
Ekirala, oyinza okukozesa CSS ya Bootstrap eyeetegefu okukozesebwa ng’omala kugatta layini eno ku kifo pulojekiti yo w’eyingira:
import 'bootstrap/dist/css/bootstrap.min.css';
Mu mbeera eno oyinza okukozesa etteeka lyo eririwo for awatali nkyukakyuka yonna ey'enjawulo ku webpack config, okuggyako nga css
teweetaaga style-loader ne css-loader zokka .sass-loader
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...