Вебпакеттер жана пакеттер
Webpack же башка пакеттөөчүлөрдү колдонуп, Bootstrap'ти долбооруңузга кантип кошууну үйрөнүңүз.
Bootstrap орнотулууда
Bootstrap'ты npm аркылуу Node.js модулу катары орнотуңуз .
JavaScript импорттоо
Бул сапты колдонмоңуздун кирүү чекитине кошуу менен Bootstrap'тин JavaScript'ин импорттоңуз (көбүнчө 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 касиетте көрсөтүлгөн Попперге көз каранды . 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';
Бул учурда сиз css
веб-пакет конфигурациясына эч кандай өзгөчө өзгөртүүлөрдү киргизбестен учурдагы эрежеңизди колдонсоңуз болот, бирок сизге sass-loader
жөн гана style-loader жана css-loader керек эмес .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...