Веб-пакеттер және бундерлер
Webpack немесе басқа бумаларды пайдаланып жобаңызға Bootstrap қосу жолын үйреніңіз.
Bootstrap орнатылуда
Жүктелуді npm көмегімен Node.js модулі ретінде орнатыңыз .
JavaScript импорттау
Бұл жолды қолданбаның кіру нүктесіне қосу арқылы Bootstrap JavaScript импорттаңыз (әдетте index.js
немесе app.js
):
// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';
Сонымен қатар, сізге бірнеше плагиндер қажет болса, қажет болған жағдайда плагиндерді жеке импорттай аласыз :
import Alert from 'bootstrap/js/dist/alert';
...
Bootstrap сипатта көрсетілген ПоппергеpeerDependencies
байланысты . Бұл сіздің package.json
пайдалануыңызға оны қосуды қамтамасыз ету керек дегенді білдіреді npm install @popperjs/core
.
Стильдерді импорттау
Алдын ала құрастырылған Sass импорттау
Bootstrap мүмкіндігін толық пайдалану және оны қажеттіліктеріңізге сәйкес реттеу үшін жобаның жинақтау процесінің бөлігі ретінде бастапқы файлдарды пайдаланыңыз.
Біріншіден, өзіңізді жасаңыз _custom.scss
және оны кірістірілген теңшелетін айнымалы мәндерді қайта анықтау үшін пайдаланыңыз . Содан кейін теңшелетін айнымалы мәндерді импорттау үшін негізгі Sass файлын пайдаланыңыз, содан кейін Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Bootstrap компиляциясы үшін қажетті жүктегіштерді орнатып, пайдаланғаныңызға көз жеткізіңіз: sass- loader , Autoprefixer бар postcss -loader . Ең аз орнату кезінде веб-пакет конфигурациясында осы ереже немесе ұқсас болуы керек:
// ...
{
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 импорттау
Сонымен қатар, жобаның кіру нүктесіне осы жолды қосу арқылы Bootstrap-тың пайдалануға дайын CSS-ін пайдалануға болады:
import 'bootstrap/dist/css/bootstrap.min.css';
Бұл жағдайда сіз тек style-loader және CSS-loadercss
қажет болмаса, веб-пакет конфигурациясына арнайы өзгертулерсіз қолданыстағы ережені пайдалана аласыз .sass-loader
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...