Verkkopaketti
Opi sisällyttämään Bootstrap projektiisi Webpackin avulla.
Bootstrapin asentaminen
Asenna bootstrap Node.js-moduuliksi npm:n avulla.
JavaScriptin tuonti
Tuo Bootstrapin JavaScript lisäämällä tämä rivi sovelluksesi aloituskohtaan (yleensä index.js
tai app.js
):
import 'bootstrap';
Vaihtoehtoisesti voit tuoda laajennuksia yksitellen tarpeen mukaan:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap riippuu jQuerystä ja Popperista , jotka on määritetty peerDependencies
ominaisuudessa; tämä tarkoittaa, että sinun on lisättävä ne molemmat package.json
käyttöösi npm install --save jquery popper.js
.
Tuodaan tyylejä
Tuodaan esikäännetty Sass
Voit nauttia Bootstrapin kaikista mahdollisuuksista ja mukauttaa sitä tarpeisiisi käyttämällä lähdetiedostoja osana projektisi niputusprosessia.
Luo ensin oma _custom.scss
ja käytä sitä sisäänrakennettujen mukautettujen muuttujien ohittamiseen . Käytä sitten Sass-päätiedostoa mukautettujen muuttujien tuomiseen ja sen jälkeen Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Jotta Bootstrap voi kääntää, varmista, että asennat ja käytät tarvittavia latausohjelmia: sass-loader , postcss-loader ja Autoprefixer . Vähimmäisasetuksella verkkopaketin kokoonpanon tulisi sisältää tämä sääntö tai vastaava:
...
{
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
}]
},
...
Tuodaan käännetty CSS
Vaihtoehtoisesti voit käyttää Bootstrapin käyttövalmis CSS:ää lisäämällä tämän rivin projektisi aloituskohtaan:
import 'bootstrap/dist/css/bootstrap.min.css';
Tässä tapauksessa voit käyttää olemassa olevaa css
sääntöäsi verkkopaketin konfigurointiin ilman erityisiä muutoksia, paitsi että et tarvitse sass-loader
vain style- loaderia ja css- loaderia .
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...