Pecyn gwe a bwnderi
Dysgwch sut i gynnwys Bootstrap yn eich prosiect gan ddefnyddio Webpack neu fwndeli eraill.
Gosod Bootstrap
Gosodwch bootstrap fel modiwl Node.js gan ddefnyddio npm.
Mewnforio JavaScript
Mewnforio JavaScript Bootstrap trwy ychwanegu'r llinell hon at bwynt mynediad eich app (fel arfer index.js
neu app.js
):
// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';
Fel arall, os mai dim ond ychydig o'n ategion sydd eu hangen arnoch, gallwch fewnforio ategion yn unigol yn ôl yr angen:
import Alert from 'bootstrap/js/dist/alert';
...
Mae Bootstrap yn dibynnu ar Popper , a nodir yn yr peerDependencies
eiddo. Mae hyn yn golygu y bydd yn rhaid i chi wneud yn siŵr ei ychwanegu at eich package.json
defnydd npm install @popperjs/core
.
Mewnforio Arddulliau
Mewnforio Sass wedi'i Rag-grynhoi
I fwynhau potensial llawn Bootstrap a'i addasu i'ch anghenion, defnyddiwch y ffeiliau ffynhonnell fel rhan o broses bwndelu eich prosiect.
Yn gyntaf, crëwch eich un eich hun _custom.scss
a'i ddefnyddio i ddiystyru'r newidynnau arferiad adeiledig . Yna, defnyddiwch eich prif ffeil Sass i fewnforio eich newidynnau arferol, ac yna Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Er mwyn i Bootstrap ei lunio, gwnewch yn siŵr eich bod yn gosod ac yn defnyddio'r llwythwyr gofynnol: sass-loader , postcss-loader gydag Autoprefixer . Gydag ychydig iawn o setup, dylai eich ffurfwedd pecyn gwe gynnwys y rheol hon neu debyg:
// ...
{
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'
}]
}
// ...
Mewnforio CSS Compiled
Fel arall, gallwch ddefnyddio CSS parod Bootstrap i'w ddefnyddio trwy ychwanegu'r llinell hon at bwynt mynediad eich prosiect:
import 'bootstrap/dist/css/bootstrap.min.css';
Yn yr achos hwn gallwch ddefnyddio'ch rheol bresennol ar gyfer css
heb unrhyw addasiadau arbennig i gyfluniad pecyn gwe, ac eithrio nad oes arnoch angen sass-loader
dim ond style-loader a css-loader .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...