Webpack
Léiert wéi Dir Bootstrap an Ärem Projet mat Webpack enthält.
Installéiert Bootstrap
Installéiert Bootstrap als Node.js Modul mat npm.
JavaScript importéieren
Importéiert Bootstrap's JavaScript andeems Dir dës Linn op den Entréespunkt vun Ärer App bäidréit (normalerweis index.js
oder app.js
):
import 'bootstrap';
Alternativ kënnt Dir Plugins individuell importéieren wéi néideg:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap hänkt jQuery a Popper , déi an der peerDependencies
Immobilie spezifizéiert sinn; dëst bedeit datt Dir sécher musst suerge fir déi zwee op Äre package.json
Gebrauch bäizefügen npm install --save jquery popper.js
.
Stiler importéieren
Prekompiléiert Sass importéieren
Fir dat vollt Potenzial vu Bootstrap ze genéissen an et op Är Bedierfnesser ze personaliséieren, benotzt d'Quelldateien als Deel vum Bündelprozess vun Ärem Projet.
Als éischt, erstellt Är eege _custom.scss
a benotzt se fir déi agebaute personaliséiert Variablen ze iwwerschreiden . Dann benotzt Är Haapt Sass Datei fir Är personaliséiert Variabelen z'importéieren, gefollegt vu Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Fir Bootstrap ze kompiléieren, gitt sécher datt Dir déi erfuerderlech Loader installéiert a benotzt: sass-loader , postcss-loader mat Autoprefixer . Mat minimale Setup sollt Är Webpack Konfiguratioun dës Regel oder ähnlech enthalen:
...
{
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
}]
},
...
Kompiléiert CSS importéieren
Alternativ kënnt Dir Bootstrap's prett-ze-benotzen CSS benotzen andeems Dir dës Linn einfach op den Entréespunkt vun Ärem Projet bäidréit:
import 'bootstrap/dist/css/bootstrap.min.css';
An dësem Fall kënnt Dir Är existent Regel benotze fir css
ouni speziell Ännerunge fir Webpack Config, ausser Dir braucht net sass-loader
just Style-loader an css-loader .
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...