بسته وب
یاد بگیرید که چگونه بوت استرپ را با استفاده از Webpack در پروژه خود بگنجانید.
نصب بوت استرپ
بوت استرپ را به عنوان یک ماژول Node.js با استفاده از npm نصب کنید.
وارد کردن جاوا اسکریپت
جاوا اسکریپت Bootstrap را با افزودن این خط به نقطه ورودی برنامه خود وارد کنید (معمولاً یا index.js
) app.js
:
import 'bootstrap';
همچنین، میتوانید در صورت نیاز افزونهها را بهصورت جداگانه وارد کنید:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
بوت استرپ به jQuery و Popper بستگی دارد که در peerDependencies
ویژگی مشخص شده اند. این بدان معنی است که شما باید مطمئن شوید که هر دوی آنها را به package.json
استفاده خود اضافه کنید npm install --save jquery popper.js
.
سبک های وارداتی
وارد کردن Sass از پیش کامپایل شده
برای لذت بردن از پتانسیل کامل بوت استرپ و سفارشی کردن آن بر اساس نیازهای خود، از فایل های منبع به عنوان بخشی از فرآیند بسته بندی پروژه خود استفاده کنید.
ابتدا، خود را ایجاد کنید _custom.scss
و از آن برای لغو متغیرهای سفارشی داخلی استفاده کنید. سپس، از فایل اصلی Sass خود برای وارد کردن متغیرهای سفارشی خود و به دنبال آن Bootstrap استفاده کنید:
@import "custom";
@import "~bootstrap/scss/bootstrap";
برای کامپایل کردن Bootstrap، مطمئن شوید که لودرهای مورد نیاز را نصب و استفاده میکنید: sass-loader ، postcss-loader با Autoprefixer . با حداقل تنظیمات، پیکربندی بسته وب شما باید شامل این قانون یا موارد مشابه باشد:
...
{
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
}]
},
...
وارد کردن CSS کامپایل شده
از طرف دیگر، می توانید از CSS آماده برای استفاده بوت استرپ با افزودن این خط به نقطه ورودی پروژه خود استفاده کنید:
import 'bootstrap/dist/css/bootstrap.min.css';
در این مورد میتوانید از قانون موجود خود css
بدون هیچ تغییر خاصی در پیکربندی بسته وب استفاده کنید، به جز اینکه sass-loader
فقط به style-loader و css-loader نیاز ندارید .
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...