Webpack
Webpack аркылуу Bootstrap'ти долбооруңузга кантип кошууну үйрөнүңүз.
Bootstrap орнотулууда
Bootstrap'ты npm аркылуу Node.js модулу катары орнотуңуз .
JavaScript импорттоо
Бул сапты колдонмоңуздун кирүү чекитине кошуу менен Bootstrap'тин JavaScript'ин импорттоңуз (көбүнчө 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 , Autoprefixer менен postcss -loader . Минималдуу орнотуу менен, веб-пакет конфигурацияңыз ушул же ушул сыяктуу эрежени камтышы керек:
...
{
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 импорттоо
Же болбосо, сиз жөн гана долбооруңуздун кирүү чекитине бул сапты кошуу менен 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']
}
]
}
...