Urubuga rwuzuye
Wige uburyo washyira Bootstrap mumushinga wawe ukoresheje Webpack cyangwa izindi bundler.
Gushyira Bootstrap
Shyiramo bootstrap nka Node.js module ukoresheje npm.
Kuzana JavaScript
Kuzana JavaScript ya Bootstrap wongeyeho uyu murongo aho porogaramu yawe yinjira (mubisanzwe index.js
cyangwa app.js
):
import 'bootstrap';
// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';
Ubundi, niba ukeneye gusa bike mumacomeka yacu, urashobora gutumiza amacomeka kugiti cye nkuko bikenewe:
import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
Bootstrap iterwa na Popper , igaragara peerDependencies
mumitungo. Ibi bivuze ko ugomba kumenya neza ko wongeyeho kubyo package.json
ukoresha npm install @popperjs/core
.
Kuzana Imisusire
Kuzana Sass Yateguwe
Kugirango wishimire ubushobozi bwuzuye bwa Bootstrap kandi uyitondere kubyo ukeneye, koresha dosiye yinkomoko nkigice cyumushinga wawe uhuza.
Ubwa mbere, kora ibyawe _custom.scss
kandi ubikoreshe kugirango uhishe ibyubatswe muburyo bwihariye . Noneho, koresha dosiye yawe nkuru ya Sass kugirango utumize ibintu byahinduwe, hanyuma ukurikire Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Kugirango Bootstrap ikusanye, menya neza ko ushyiraho kandi ukoreshe ibikenerwa bisabwa: sass-umutware , postcss- umutware hamwe na Autoprefixer . Hamwe nimikorere mike, webpack config yawe igomba gushyiramo iri tegeko cyangwa bisa:
// ...
{
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'
}]
}
// ...
Kuzana CSS Yakozwe
Ubundi, urashobora gukoresha Bootstrap yiteguye-gukoresha-CSS wongeyeho uyu murongo aho umushinga wawe winjirira:
import 'bootstrap/dist/css/bootstrap.min.css';
Muri iki kibazo, ushobora gukoresha amategeko yawe asanzweho css
nta gihindutse kidasanzwe kuri webpack config, usibye ko udakeneye sass-loader
gusa imiterere-umutwaro na css-umutwaro .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...