فریمورک vue js در سال های اخیر در حال افزایش محبوبیت بوده و مثل react و angular پلاگین ها و لایبرری های مختلفی برای آن عرضه شده از جمله لایبرری هایی که کامپوننت های آماده به vue اضافه میکند bootstrap vue است که کامپوننت ها و استایل های bootstrap را به vue اضافه میکند.
پلاگین bootstrap vue از استایل های خود bootstrap استفاده میکند و باید برای استفاده از این پلاگین bootstrap هم نصب و import کنیم
توصیه خود bootstrap این است که فایل های اصلی bootstrap را ویرایش نکنیم بلکه به راحتی میتوان با ایجاد یک فایل کاستوم bootstarp را بر اساس طراحی و نیاز پروژه تغییر داد
نسخه nuxt bootstrap vue استایل های bootstrap را به طور پیشفرض لود میکند که با false قرار دادن css های مربوط به bootstap vue و bootstrap میتوان از bootstrap شخصی سازی شده با variable ها و mixin های custom استفاده کرد:
bootstrapVue: {
bootstrapCSS: false, // Or `css: false`
bootstrapVueCSS: false // Or `bvCSS: false`
}
بعد از غیر فعال کردن css پیش فرض با ایجاد یک فایل scss دلخواه تنظیمات و شخصی سازی های لازم را در این فایل انجام میدهیم و سپس bootstrap را import میکنیم و این فایل را به عنوان global css در فایل تنظیمات nuxt تعیین میکنیم:
assets/styles/custom.scss:
// Custom Bootstrap variable overrides go first
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 640px,
lg: 992px,
xl: 1300px
);
$enable-rounded: false;
//colors
$primary: #e7ee7e;
$secondary: #888888;
// Then include the following
@import 'bootstrap/scss/bootstrap.scss';
@import 'bootstrap-vue/src/index.scss';
// custom styles
.btn{
Border: none;
}
و در فایل تنظیمات nuxt:
nuxt.config.js:
css: [
'~/assets/styles/custom.scss'
],
با تغییر variable ها میتوان تقریبا تمام style های bootstrap را کنترل کرد همه ی این variable ها در این فایل وجود دارد:
https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss
برای تفییر هر کدام از مقادیر کافی است هر کدام از آنها را که نیاز به تغییر دارد در فایل custom کپی کنیم و قبل از import bootstrap مقدار آن ها را تعیین کنیم مثل $enable-rounded در مثال بالا که تمام radius ها را حذف میکند
برای شخصی سازی بیشتر، بازنویسی استایل های bootstrap یا اضافه کردن style های پیشفرض جدید میتوان آن ها را در این فایل تعریف کرد.
اطلاعات بیشتر:
https://bootstrap-vue.org/docs/reference/theming
https://getbootstrap.com/docs/4.5/getting-started/theming
