Веб пакет и пакети
Научите како да укључите Боотстрап у свој пројекат користећи Вебпацк или друге пакете.
Инсталирање Боотстрапа
Инсталирајте боотстрап као Ноде.јс модул користећи нпм.
Увоз ЈаваСцрипт
Увезите Боотстрап ЈаваСцрипт додавањем ове линије на улазну тачку своје апликације (обично index.js
или app.js
):
import 'bootstrap';
// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';
Алтернативно, ако вам је потребно само неколико наших додатака, можете да увезете додатке појединачно по потреби:
import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
Боотстрап зависи од Поппер - а, који је наведен у peerDependencies
својству. То значи да ћете морати да се побринете да га додате у своју package.json
употребу npm install @popperjs/core
.
Увоз стилова
Увоз унапред компајлираних Сасс
Да бисте уживали у пуном потенцијалу Боотстрап-а и прилагодили га својим потребама, користите изворне датотеке као део процеса повезивања вашег пројекта.
Прво, направите сопствену _custom.scss
и користите је да замените уграђене прилагођене променљиве . Затим користите своју главну Сасс датотеку да увезете своје прилагођене променљиве, а затим Боотстрап:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Да би се Боотстрап компајлирао, уверите се да сте инсталирали и користите потребне учитаваче: сасс-лоадер , постцсс-лоадер са Аутопрефикер -ом . Уз минимално подешавање, конфигурација вашег веб пакета треба да садржи ово правило или слично:
// ...
{
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 'bootstrap/dist/css/bootstrap.min.css';
У овом случају можете користити своје постојеће правило за css
без икаквих посебних модификација конфигурације веб пакета, осим што вам нису потребни sass-loader
само учитавач стилова и цсс-лоадер .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...