Вебпацк
Научите како да укључите Боотстрап у свој пројекат користећи Вебпацк.
Инсталирање Боотстрап-а
Инсталирајте боотстрап као Ноде.јс модул користећи нпм.
Увоз ЈаваСцрипт
Увезите Боотстрап ЈаваСцрипт додавањем ове линије на улазну тачку своје апликације (обично index.js
или app.js
):
import 'bootstrap';
Алтернативно, можете да увезете додатке појединачно по потреби:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Боотстрап зависи од јКуери и Поппер , који су наведени у peerDependencies
својству; то значи да ћете морати да се побринете да их додате у своју package.json
употребу npm install --save jquery popper.js
.
Увоз стилова
Увоз унапред компајлираних Сасс
Да бисте уживали у пуном потенцијалу Боотстрапа и прилагодили га својим потребама, користите изворне датотеке као део процеса повезивања вашег пројекта.
Прво, направите сопствену _custom.scss
и користите је да замените уграђене прилагођене променљиве . Затим користите своју главну Сасс датотеку да увезете своје прилагођене променљиве, а затим Боотстрап:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Да би се Боотстрап компајлирао, уверите се да сте инсталирали и користите потребне учитаваче: сасс-лоадер , постцсс-лоадер са Аутопрефикер -ом . Уз минимално подешавање, конфигурација вашег веб пакета треба да садржи ово правило или слично:
...
{
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
}]
},
...
Увоз компајлираног ЦСС-а
Алтернативно, можете користити Боотстрап-ов ЦСС спреман за употребу једноставним додавањем ове линије на улазну тачку вашег пројекта:
import 'bootstrap/dist/css/bootstrap.min.css';
У овом случају можете користити своје постојеће правило за css
без икаквих посебних модификација конфигурације веб пакета, осим што вам нису потребни sass-loader
само учитавач стилова и цсс-лоадер .
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...