Baakadaha shabakadda iyo xidhmooyinka
Baro sida loogu daro Bootstrap mashruucaaga addoo isticmaalaya Bogagga Webka ama xidhmooyinka kale.
Ku rakibida Bootstrap
Ku rakib bootstrap sida moduleka Node.js adoo isticmaalaya npm.
Soo dejinta JavaScript
Soo deji Bootstrap JavaScript adiga oo ku dara khadkan barta laga soo galo abkaaga (sida caadiga ah index.js
ama app.js
):
import 'bootstrap';
// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';
Haddii kale, haddii aad u baahan tahay oo keliya dhowr ka mid ah pluginsyadayada, waxaad soo dejisan kartaa plugins si gaar ah haddii loo baahdo:
import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
Bootstrap waxay kuxirantahay Popper , kaas oo lagu qeexay peerDependencies
guriga. Tani waxay ka dhigan tahay inaad hubiso inaad ku darto package.json
isticmaalkaaga npm install @popperjs/core
.
Soo dejinta Qaababka
Soo dejinta Sass la soo diyaariyay
Si aad ugu raaxaysato kartida buuxda ee Bootstrap oo aad u habaynayso baahiyahaaga, isticmaal faylasha isha qayb ka mid ah habka xidhidhiyaha mashruucaaga.
Marka hore, samee kaaga _custom.scss
oo isticmaal si aad u tirtirto doorsoomayaasha caadadii ee ku dhex jira . Ka dib, isticmaal faylkaaga ugu weyn ee Sass si aad u soo dejiso doorsoomayaashaada gaarka ah, oo ay ku xigto Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Si Bootstrap loo ururiyo, hubi inaad rakibtay oo aad isticmaashid ralayaasha loo baahan yahay: sass-loader , postcss-loader oo leh Autoprefixer . Habaynta ugu yar, isku xidhka xidhxidhkaaga webka waa inuu ku jiraa xeerkan ama wax la mid ah:
// ...
{
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'
}]
}
// ...
Soo dejinta CSS la soo ururiyey
Haddii kale, waxaad isticmaali kartaa Bootstrap ee diyaarka u ah in la isticmaalo CSS adigoo si fudud ugu daraya khadkan barta laga soo galo mashruucaaga:
import 'bootstrap/dist/css/bootstrap.min.css';
Xaaladdan oo kale waxaad u isticmaali kartaa qaanuunkaaga jira css
adigoon wax isbeddel gaar ah ku samayn habaynta xirmada webka, marka laga reebo inaadan u baahnayn sass-loader
kaliya -loader iyo css-loader .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...