Spletni paket
Naučite se vključiti Bootstrap v svoj projekt s pomočjo Webpacka.
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';
Lahko pa uvozite vtičnike posamično , kot je potrebno:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap je odvisen od jQuery in Popper , ki sta navedena v peerDependencies
lastnosti; to pomeni, da se boste morali prepričati, da ste dodali oba k svoji package.json
uporabi npm install --save jquery popper.js
.
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: [{
loader: 'style-loader', // inject CSS to page
}, {
loader: 'css-loader', // translates CSS into CommonJS modules
}, {
loader: 'postcss-loader', // Run postcss actions
options: {
plugins: function () { // postcss plugins, can be exported to postcss.config.js
return [
require('autoprefixer')
];
}
}
}, {
loader: 'sass-loader' // compiles Sass to CSS
}]
},
...
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']
}
]
}
...