Webpack
Zistite, ako zahrnúť Bootstrap do vášho projektu pomocou Webpacku.
Inštalácia Bootstrap
Nainštalujte bootstrap ako modul Node.js pomocou npm.
Importuje sa JavaScript
Importujte JavaScript Bootstrapu pridaním tohto riadku do vstupného bodu vašej aplikácie (zvyčajne index.js
alebo app.js
):
import 'bootstrap';
Prípadne môžete podľa potreby importovať doplnky jednotlivo :
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap závisí od jQuery a Popper , ktoré sú špecifikované vo peerDependencies
vlastnosti; to znamená, že sa budete musieť uistiť, že ste ich pridali do svojho package.json
používania npm install --save jquery popper.js
.
Importovanie štýlov
Importuje sa predkompilovaný Sass
Ak chcete využiť plný potenciál Bootstrapu a prispôsobiť ho svojim potrebám, použite zdrojové súbory ako súčasť procesu spájania vášho projektu.
Najprv si vytvorte vlastnú _custom.scss
a použite ju na prepísanie vstavaných vlastných premenných . Potom použite svoj hlavný súbor Sass na import vlastných premenných a potom Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Aby sa Bootstrap skompiloval, uistite sa, že ste nainštalovali a používali požadované zavádzače: sass- loader , postcss-loader s Autoprefixer . Pri minimálnom nastavení by vaša konfigurácia webového balíka mala obsahovať toto alebo podobné pravidlo:
...
{
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
}]
},
...
Import kompilovaného CSS
Prípadne môžete použiť CSS pripravený na použitie Bootstrap jednoduchým pridaním tohto riadku do vstupného bodu vášho projektu:
import 'bootstrap/dist/css/bootstrap.min.css';
V tomto prípade môžete použiť svoje existujúce pravidlo css
bez akýchkoľvek špeciálnych úprav konfigurácie webpacku, okrem toho, že nepotrebujete sass-loader
len style-loader a css-loader .
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...