Webpack a svazky
Naučte se, jak zahrnout Bootstrap do vašeho projektu pomocí Webpacku nebo jiných bundlerů.
Instalace Bootstrap
Nainstalujte bootstrap jako modul Node.js pomocí npm.
Import JavaScriptu
Importujte JavaScript Bootstrapu přidáním tohoto řádku do vstupního bodu aplikace (obvykle index.js
nebo app.js
):
// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';
Případně, pokud potřebujete pouze několik našich pluginů, můžete importovat pluginy jednotlivě podle potřeby:
import Alert from 'bootstrap/js/dist/alert';
...
Bootstrap závisí na Popper , který je uveden ve peerDependencies
vlastnosti. To znamená, že se budete muset ujistit, že jej přidáte do svého package.json
použití npm install @popperjs/core
.
Import stylů
Import předkompilovaného Sass
Chcete-li využít plný potenciál Bootstrapu a přizpůsobit jej svým potřebám, použijte zdrojové soubory jako součást procesu sdružování vašeho projektu.
Nejprve si vytvořte vlastní _custom.scss
a použijte ji k přepsání vestavěných vlastních proměnných . Poté použijte svůj hlavní soubor Sass k importu vlastních proměnných a poté Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Aby se Bootstrap zkompiloval, ujistěte se, že jste nainstalovali a používali požadované zavaděče: sass- loader , postcss-loader s Autoprefixerem . S minimálním nastavením by konfigurace vašeho webového balíčku měla obsahovat toto nebo 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
Případně můžete použít CSS připravené k použití Bootstrap jednoduchým přidáním tohoto řádku do vstupního bodu vašeho projektu:
import 'bootstrap/dist/css/bootstrap.min.css';
V tomto případě můžete použít své stávající pravidlo pro css
bez jakýchkoli speciálních úprav konfigurace webpacku, kromě toho, že nepotřebujete sass-loader
pouze style-loader a css-loader .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...