Webpack a balíky
Zistite, ako zahrnúť Bootstrap do vášho projektu pomocou Webpacku alebo iných balíkov.
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';
// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';
Prípadne, ak potrebujete len niekoľko našich doplnkov, môžete ich podľa potreby importovať jednotlivo :
import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
Bootstrap závisí od Poppera , ktorý je špecifikovaný vo peerDependencies
vlastnosti. To znamená, že sa budete musieť uistiť, že ho pridáte do svojho package.json
používania npm install @popperjs/core
.
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: [{
// 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'
}]
}
// ...
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'
]
}
]
}
// ...