Urubuga
Wige uburyo washyira Bootstrap mumushinga wawe ukoresheje Webpack.
Gushyira Bootstrap
Shyiramo bootstrap nka Node.js module ukoresheje npm.
Kuzana JavaScript
Kuzana JavaScript ya Bootstrap wongeyeho uyu murongo aho porogaramu yawe yinjira (mubisanzwe index.js
cyangwa app.js
):
import 'bootstrap';
Ubundi, urashobora gutumiza amacomeka kugiti cye nkuko bikenewe:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap iterwa na jQuery na Popper , bigaragara peerDependencies
mumitungo; ibi bivuze ko ugomba kumenya neza ko wongeyeho byombi package.json
mugukoresha npm install --save jquery popper.js
.
Kuzana Imisusire
Kuzana Sass Yateguwe
Kugirango wishimire ubushobozi bwuzuye bwa Bootstrap kandi uyitondere kubyo ukeneye, koresha dosiye yinkomoko nkigice cyumushinga wawe uhuza.
Ubwa mbere, kora ibyawe _custom.scss
kandi ubikoreshe kugirango uhishe ibyubatswe muburyo bwihariye . Noneho, koresha dosiye yawe nkuru ya Sass kugirango utumize ibintu byahinduwe, hanyuma ukurikire Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Kugirango Bootstrap ikusanye, menya neza ko ushyiraho kandi ukoreshe ibikenerwa bisabwa: sass-umutware , postcss- umutware hamwe na Autoprefixer . Hamwe nimikorere mike, webpack config yawe igomba gushyiramo iri tegeko cyangwa bisa:
...
{
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
}]
},
...
Kuzana CSS Yakozwe
Ubundi, urashobora gukoresha Bootstrap yiteguye-gukoresha-CSS wongeyeho uyu murongo aho umushinga wawe winjirira:
import 'bootstrap/dist/css/bootstrap.min.css';
Muri iki kibazo, ushobora gukoresha amategeko yawe asanzweho css
nta gihindutse kidasanzwe kuri webpack config, usibye ko udakeneye sass-loader
gusa imiterere-umutwaro na css-umutwaro .
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...