Webpack
Dzidza maitiro ekusanganisa Bootstrap mupurojekiti yako uchishandisa Webpack.
Kuisa Bootstrap
Isa bootstrap seNode.js module uchishandisa npm.
Kupinza JavaScript
Ngenisa Bootstrap's JavaScript nekuwedzera iyi mutsara kunzvimbo yekupinda yeapp yako (kazhinji index.js
kana app.js
):
import 'bootstrap';
Neimwe nzira, unogona kupinza plugins wega sezvinodiwa:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap zvinoenderana nejQuery uye Popper , izvo zvinotsanangurwa peerDependencies
mumudziyo; izvi zvinoreva kuti uchafanirwa kuve nechokwadi chekuwedzera ese ari maviri package.json
pakushandisa kwako npm install --save jquery popper.js
.
Importing Styles
Kupinza Precompiled Sass
Kuti unakirwe neiyo yakazara kugona kweBootstrap uye kuigadzirisa kune zvaunoda, shandisa iyo sosi mafaera sechikamu chepurojekiti yako yekuunganidza maitiro.
Kutanga, gadzira yako _custom.scss
uye uishandise kupfuudza iyo yakavakirwa-mukati tsika zvinosiyana . Zvadaro, shandisa yako huru Sass faira kupinza yako tsika dzakasiyana, inoteverwa neBootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Kuti Bootstrap iunganidze, ita shuwa kuti iwe unoisa uye shandisa inodiwa inotakura: sass-loader , postcss-loader ne Autoprefixer . Nekuseta kushoma, yako webpack config inofanira kusanganisira mutemo uyu kana zvakafanana:
...
{
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
}]
},
...
Kupinza Yakaunganidzwa CSS
Neimwe nzira, unogona kushandisa Bootstrap's yakagadzirira-kushandisa-CSS nekungowedzera iyi mutsara kunzvimbo yekupinda purojekiti yako:
import 'bootstrap/dist/css/bootstrap.min.css';
Mune ino kesi unogona kushandisa mutemo wako uripo css
pasina chero yakakosha shanduko kune webpack config, kunze kwekunge iwe usingade sass-loader
chete style-loader uye css-loader .
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...