Spletni paket in paketi
Naučite se vključiti Bootstrap v svoj projekt z uporabo Webpacka ali drugih povezovalnikov.
Namestitev programa Bootstrap
Namestite bootstrap kot modul Node.js z uporabo npm.
Uvažanje JavaScripta
Uvozite JavaScript Bootstrapa tako, da dodate to vrstico v vstopno točko aplikacije (običajno index.js
ali app.js
):
import 'bootstrap';
// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';
Če pa potrebujete le nekaj naših vtičnikov, lahko po potrebi uvozite vtičnike posamično :
import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
Bootstrap je odvisen od Popperja , ki je določen v peerDependencies
lastnosti. To pomeni, da se boste morali prepričati, da ga dodate svoji package.json
uporabi npm install @popperjs/core
.
Uvažanje slogov
Uvažanje vnaprej prevedenega Sass
Če želite uživati v celotnem potencialu Bootstrapa in ga prilagoditi svojim potrebam, uporabite izvorne datoteke kot del postopka združevanja vašega projekta.
Najprej ustvarite svojega _custom.scss
in ga uporabite za preglasitev vgrajenih spremenljivk po meri . Nato uporabite glavno datoteko Sass za uvoz spremenljivk po meri, ki ji sledi Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Za prevajanje Bootstrapa poskrbite, da namestite in uporabljate zahtevane nalagalnike: sass -loader , postcss-loader z Autoprefixer . Z minimalno nastavitvijo bi morala vaša konfiguracija spletnega paketa vsebovati to pravilo ali podobno:
// ...
{
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'
}]
}
// ...
Uvažanje prevedenega CSS
Lahko pa uporabite Bootstrapov CSS, pripravljen za uporabo, tako da preprosto dodate to vrstico v vstopno točko svojega projekta:
import 'bootstrap/dist/css/bootstrap.min.css';
V tem primeru lahko uporabite svoje obstoječe pravilo css
brez kakršnih koli posebnih sprememb v konfiguraciji spletnega paketa, le da ne potrebujete sass-loader
samo nalagalnik slogov in nalagalnik css .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...