xirmo mareegaha
Baro sida loogu daro Bootstrap mashruucaaga addoo isticmaalaya Webpack.
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';
Haddii kale, waxaad soo dejisan kartaa plugins si gaar ah haddii loo baahdo:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap waxay kuxirantahay jQuery iyo Popper , kuwaas oo lagu qeexay peerDependencies
guriga; Tani waxay ka dhigan tahay inaad hubiso inaad ku darto labadoodaba package.json
isticmaalkaaga npm install --save jquery popper.js
.
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: [{
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
}]
},
...
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']
}
]
}
...