Webpack
Jifunze jinsi ya kujumuisha Bootstrap katika mradi wako kwa kutumia Webpack.
Kufunga Bootstrap
Sakinisha bootstrap kama moduli ya Node.js kwa kutumia npm.
Inaleta JavaScript
Ingiza JavaScript ya Bootstrap kwa kuongeza laini hii kwenye sehemu ya kuingilia ya programu yako (kwa kawaida index.js
au app.js
):
import 'bootstrap';
Vinginevyo, unaweza kuagiza programu-jalizi kibinafsi kama inahitajika:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap inategemea jQuery na Popper , ambayo ni maalum katika peerDependencies
mali; hii inamaanisha kuwa itabidi uhakikishe kuwa unaziongeza zote mbili kwenye package.json
matumizi yako npm install --save jquery popper.js
.
Mitindo ya Kuagiza
Inaleta Sass Iliyoundwa Awali
Ili kufurahia uwezo kamili wa Bootstrap na kuibinafsisha kulingana na mahitaji yako, tumia faili chanzo kama sehemu ya mchakato wa kuunganisha mradi wako.
Kwanza, unda yako mwenyewe _custom.scss
na uitumie kubatilisha anuwai maalum zilizojumuishwa . Kisha, tumia faili yako kuu ya Sass kuagiza anuwai zako maalum, ikifuatiwa na Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Ili Bootstrap ikusanye, hakikisha umesakinisha na kutumia vipakiaji vinavyohitajika: sass-loader , postcss-loader na Autoprefixer . Kwa usanidi mdogo, usanidi wako wa pakiti ya wavuti unapaswa kujumuisha sheria hii au sawa:
...
{
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
}]
},
...
Inaleta CSS Iliyokusanywa
Vinginevyo, unaweza kutumia CSS ya Bootstrap iliyo tayari kutumia kwa kuongeza tu laini hii kwenye sehemu ya kuingilia ya mradi wako:
import 'bootstrap/dist/css/bootstrap.min.css';
Katika kesi hii unaweza kutumia sheria yako iliyopo css
bila marekebisho yoyote maalum kwa usanidi wa pakiti za wavuti, isipokuwa hauitaji sass-loader
tu style-loader na css-loader .
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...