وێبپاک و باندلەرەکان
فێربە چۆن Bootstrap لە پرۆژەکەتدا دابنێیت بە بەکارهێنانی Webpack یان باندلەری تر.
دامەزراندنی Bootstrap
bootstrap وەک مۆدیولێکی Node.js بە بەکارهێنانی npm دابنێ.
هاوردەکردنی جاڤاسکڕێپت
جاڤاسکڕێپتی Bootstrap هاوردە بکە بە زیادکردنی ئەم دێڕە بۆ خاڵی چوونە ژوورەوەی ئەپەکەت (بەزۆری index.js
یان app.js
):
import 'bootstrap';
// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';
یان ئەگەر تەنها پێویستت بە چەند پێوەکراوەکانمانە، دەتوانیت پێوەکراوەکان بە تاک هاوردە بکەیت بەپێی پێویست:
import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
Bootstrap پشت بە Popper دەبەستێت کە لە peerDependencies
تایبەتمەندییەکەدا دیاری کراوە. ئەمەش واتە دەبێت دڵنیا بیت لە زیادکردنی بۆ package.json
بەکارهێنانەکەت npm install @popperjs/core
.
هاوردەکردنی ستایلەکان
هاوردەکردنی پێش کۆمپایڵکراوی Sass
بۆ ئەوەی چێژ لە توانای تەواوی بووتستراپ وەربگریت و بەپێی پێویستیەکانت خۆت دروستی بکەیت، فایلە سەرچاوەییەکان وەک بەشێک لە پرۆسەی کۆکردنەوەی پڕۆژەکەت بەکاربهێنە.
سەرەتا خۆت دروست بکە _custom.scss
و بەکاری بهێنە بۆ سەرپێچی گۆڕاوە تایبەتمەندەکانی ناوەوە . پاشان، فایلە سەرەکییەکانی Sass بەکاربهێنە بۆ هاوردەکردنی گۆڕاوە تایبەتەکانت، دواتر Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
بۆ ئەوەی Bootstrap کۆمپایڵ بکات، دڵنیابە کە بارکەرە پێویستەکان دامەزرێنیت و بەکاریان دەهێنیت: sass-loader , postcss-loader لەگەڵ Autoprefixer . بە کەمترین ڕێکخستن، ڕێکخستنی وێبپاکەکەت دەبێت ئەم یاسایە یان هاوشێوەی لەخۆ بگرێت:
// ...
{
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'
}]
}
// ...
هاوردەکردنی CSS ی کۆکراوە
یان دەتوانیت CSS ی ئامادەکراوی Bootstrap بەکاربهێنیت بە تەنها زیادکردنی ئەم دێڕە بۆ خاڵی چوونەژوورەوەی پڕۆژەکەت:
import 'bootstrap/dist/css/bootstrap.min.css';
لەم حاڵەتەدا دەتوانیت یاسای ئێستات بەکاربهێنیت بۆ css
بەبێ هیچ گۆڕانکارییەکی تایبەت بۆ ڕێکخستنی وێبپاک، تەنها پێویستت بە sass-loader
تەنها style-loader و css-loader نییە .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...