Retpako kaj pakaĵoj
Lernu kiel inkludi Bootstrap en via projekto uzante Webpack aŭ aliajn pakaĵojn.
Instalante Bootstrap
Instalu bootstrap kiel Node.js-modulo uzante npm.
Importado de JavaScript
Importu la JavaScript de Bootstrap aldonante ĉi tiun linion al la enirpunkto de via aplikaĵo (kutime index.js
aŭ app.js
):
import 'bootstrap';
// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';
Alternative, se vi bezonas nur kelkajn el niaj kromprogramoj, vi povas importi kromaĵojn individue laŭbezone:
import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
Bootstrap dependas de Popper , kiu estas specifita en la peerDependencies
posedaĵo. Ĉi tio signifas, ke vi devos certigi aldoni ĝin al via package.json
uzado npm install @popperjs/core
.
Importi Stilojn
Importi Antaŭkompilitan Sass
Por ĝui la plenan potencialon de Bootstrap kaj agordi ĝin laŭ viaj bezonoj, uzu la fontdosierojn kiel parton de la kunigprocezo de via projekto.
Unue, kreu vian propran _custom.scss
kaj uzu ĝin por anstataŭi la enkonstruitajn kutimajn variablojn . Poste, uzu vian ĉefan Sass-dosieron por importi viajn kutimajn variablojn, sekvitajn de Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Por ke Bootstrap kompilu, certigu, ke vi instalu kaj uzu la bezonatajn ŝargilojn: sass-loader , postcss-loader kun Autoprefixer . Kun minimuma agordo, via retpaka agordo devus inkluzivi ĉi tiun regulon aŭ similan:
// ...
{
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'
}]
}
// ...
Importado de Kompilita CSS
Alternative, vi povas uzi la uzeblan CSS de Bootstrap simple aldonante ĉi tiun linion al la enirpunkto de via projekto:
import 'bootstrap/dist/css/bootstrap.min.css';
En ĉi tiu kazo vi povas uzi vian ekzistantan regulon css
sen specialaj modifoj al webpack config, krom vi ne bezonas sass-loader
nur style-loader kaj css-loader .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...