Веб-пакет и пакети
Научете како да го вклучите Bootstrap во вашиот проект користејќи Webpack или други пакети.
Инсталирање на Bootstrap
Инсталирајте bootstrap како модул Node.js користејќи npm.
Увезување JavaScript
Увезете го JavaScript на Bootstrap со додавање на оваа линија во влезната точка на вашата апликација (обично 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';
Bootstrap зависи од Popper , што е наведено во peerDependencies
имотот. Ова значи дека ќе мора да бидете сигурни дека ќе го додадете во вашето package.json
користење npm install @popperjs/core
.
Стилови за увоз
Увоз на претходно компајлиран Sass
За да уживате во целосниот потенцијал на Bootstrap и да го приспособите на вашите потреби, користете ги изворните датотеки како дел од процесот на здружување на вашиот проект.
Прво, креирајте свој _custom.scss
и користете го за да ги отфрлите вградените сопствени променливи . Потоа, користете ја вашата главна датотека Sass за да ги увезете вашите сопствени променливи, проследени со Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
За да може Bootstrap да се компајлира, погрижете се да ги инсталирате и користите потребните натоварувачи: sass-loader , postcss-loader со Autoprefixer . Со минимално поставување, конфигурацијата на вашиот веб-пакет треба да го содржи ова правило или слично:
// ...
{
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'
}]
}
// ...
Увоз на компајлиран CSS
Алтернативно, можете да ја користите подготвената за употреба CSS на Bootstrap со едноставно додавање на оваа линија во влезната точка на вашиот проект:
import 'bootstrap/dist/css/bootstrap.min.css';
Во овој случај, можете да го користите вашето постоечко правило css
без никакви посебни модифик��ции на конфигурацијата на webpack, освен што не ви требаат sass-loader
само style-loader и css-loader .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...