Веб пакет
Научете како да го вклучите Bootstrap во вашиот проект користејќи Webpack.
Инсталирање на Bootstrap
Инсталирајте bootstrap како модул Node.js користејќи npm.
Увезување JavaScript
Увезете го JavaScript на Bootstrap со додавање на оваа линија во влезната точка на вашата апликација (обично index.js
или app.js
):
import 'bootstrap';
Алтернативно, можете да увезувате приклучоци поединечно по потреба:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap зависи од jQuery и Popper , кои се наведени во peerDependencies
својството; тоа значи дека ќе мора да бидете сигурни дека ќе ги додадете и двете во вашето package.json
користење npm install --save jquery popper.js
.
Стилови за увоз
Увоз на претходно компајлиран Sass
За да уживате во целосниот потенцијал на Bootstrap и да го приспособите на вашите потреби, користете ги изворните датотеки како дел од процесот на здружување на вашиот проект.
Прво, креирајте свој _custom.scss
и користете го за да ги отфрлите вградените сопствени променливи . Потоа, користете ја вашата главна датотека Sass за да ги увезете вашите сопствени променливи, проследени со Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
За да може Bootstrap да се компајлира, погрижете се да ги инсталирате и користите потребните натоварувачи: sass-loader , postcss-loader со Autoprefixer . Со минимално поставување, конфигурацијата на вашиот веб-пакет треба да го содржи ова правило или слично:
...
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader', // inject CSS to page
}, {
loader: 'css-loader', // translates CSS into CommonJS modules
}, {
loader: 'postcss-loader', // Run postcss actions
options: {
plugins: function () { // postcss plugins, can be exported to postcss.config.js
return [
require('autoprefixer')
];
}
}
}, {
loader: 'sass-loader' // compiles Sass to CSS
}]
},
...
Увоз на компајлиран CSS
Алтернативно, можете да ја користите подготвената за употреба CSS на Bootstrap со едноставно додавање на оваа линија во влезната точка на вашиот проект:
import 'bootstrap/dist/css/bootstrap.min.css';
Во овој случај, можете да го користите вашето постоечко правило css
без никакви посебни модификации на конфигурацијата на веб-пакет, освен што не ви требаат sass-loader
само style-loader и css-loader .
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...