Webpack ati awọn edidi
Kọ ẹkọ bi o ṣe le ṣafikun Bootstrap sinu iṣẹ akanṣe rẹ nipa lilo apo-iwe wẹẹbu tabi awọn edidi miiran.
Fifi Bootstrap sori ẹrọ
Fi sori ẹrọ bootstrap bi Node.js module nipa lilo npm.
Gbigbe JavaScript wọle
Ṣe agbewọle Bootstrap JavaScript nipa fifi laini yii kun si aaye titẹsi app rẹ (nigbagbogbo index.js
tabi app.js
):
// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';
Ni omiiran, ti o ba nilo diẹ ninu awọn afikun wa, o le gbe awọn afikun wọle lọkọọkan bi o ti nilo:
import Alert from 'bootstrap/js/dist/alert';
...
Bootstrap da lori Popper , eyiti o jẹ pato ninu ohun- peerDependencies
ini naa. Eyi tumọ si pe iwọ yoo ni lati rii daju pe o fi kun si package.json
lilo rẹ npm install @popperjs/core
.
Akowọle Styles
Ṣe agbewọle Sass ti a ti ṣajọ tẹlẹ
Lati gbadun agbara ni kikun ti Bootstrap ati ṣe akanṣe rẹ si awọn iwulo rẹ, lo awọn faili orisun gẹgẹbi apakan ti ilana iṣakojọpọ iṣẹ akanṣe rẹ.
Ni akọkọ, ṣẹda tirẹ _custom.scss
ki o lo lati bori awọn oniyipada aṣa ti a ṣe sinu rẹ . Lẹhinna, lo faili Sass akọkọ rẹ lati gbe awọn oniyipada aṣa rẹ wọle, atẹle nipasẹ Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Fun Bootstrap lati ṣajọ, rii daju pe o fi sori ẹrọ ati lo awọn agberu ti a beere: sass-loader , postcss-loader pẹlu Autoprefixer . Pẹlu iṣeto ti o kere ju, atunto apo-iwe wẹẹbu rẹ yẹ ki o pẹlu ofin yii tabi iru:
// ...
{
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'
}]
}
// ...
Gbigbawọle CSS Iṣakojọpọ
Ni omiiran, o le lo CSS ti o ṣetan lati lo Bootstrap nipa fifi laini yii kun si aaye titẹsi iṣẹ akanṣe rẹ:
import 'bootstrap/dist/css/bootstrap.min.css';
Ni ọran yii o le lo ofin ti o wa tẹlẹ css
laisi awọn iyipada pataki si atunto apo-iwe wẹẹbu, ayafi ti o ko ba nilo sass-loader
agberu ara ati css-loader .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...