ويب پيڪ ۽ بنڊلرز
سکو ته ڪيئن شامل ڪجي Bootstrap کي پنھنجي پروجيڪٽ ۾ Webpack يا ٻين بنڊل استعمال ڪندي.
Bootstrap انسٽال ڪرڻ
npm استعمال ڪندي Bootstrap کي Node.js ماڊل طور انسٽال ڪريو.
جاوا اسڪرپٽ درآمد ڪرڻ
Bootstrap جي JavaScript درآمد ڪريو ھن لائن کي پنھنجي ايپ جي انٽري پوائنٽ ۾ شامل ڪندي (عام طور تي 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';
بوٽ اسٽراپ پوپر تي منحصر آهي ، جيڪو peerDependencies
ملڪيت ۾ بيان ڪيو ويو آهي. ان جو مطلب اهو آهي ته توهان کي پڪ ڪرڻو پوندو ته ان کي توهان جي package.json
استعمال ۾ شامل ڪيو وڃي npm install @popperjs/core
.
وارداتي انداز
Precompiled Sass درآمد ڪرڻ
بوٽ اسٽريپ جي مڪمل صلاحيت مان لطف اندوز ٿيڻ ۽ ان کي پنهنجي ضرورتن مطابق ترتيب ڏيڻ لاءِ، ماخذ فائلن کي پنهنجي پروجيڪٽ جي بنڊلنگ عمل جي حصي طور استعمال ڪريو.
پهرين، پنهنجو ٺاهيو ۽ ان کي استعمال ڪرڻ لاءِ استعمال ڪريو بلٽ ان ڪسٽم متغيرن_custom.scss
کي ختم ڪرڻ لاءِ . پوء، پنھنجي مکيه Sass فائل استعمال ڪريو پنھنجي ڪسٽم متغير کي درآمد ڪرڻ لاء، بعد ۾ بوٽ اسٽراپ:
@import "custom";
@import "~bootstrap/scss/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 درآمد ڪرڻ
متبادل طور تي، توھان استعمال ڪري سگھوٿا Bootstrap جي استعمال لاءِ تيار ڪيل CSS صرف ھن لائن کي پنھنجي پروجيڪٽ جي داخلا پوائنٽ ۾ شامل ڪندي:
import 'bootstrap/dist/css/bootstrap.min.css';
ان صورت ۾ توھان پنھنجي موجوده قاعدي کي استعمال ڪري سگھو ٿا css
بغير ڪنھن خاص تبديليءَ جي webpack config ۾، سواءِ توھان کي ضرورت نه آھي sass-loader
صرف style-loader ۽ css-loader .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...