سلام و درود
من میخوام از متغیر های bootstrap 5 در فایل SCSS خودم استفاده کنم . مثلا داشته باشیم :
$primary: #256931;
بوت استرپ رو به صورت زیر به پروژه لاراول ( که از vite برای پردازش فایل های SCSS استفاده میکنه ) اضافه میکنم :
@import 'bootstrap/scss/bootstrap';
تا اینجای کار همه چی درسته و مشکلی نیست. اما وقتی میخوام از امکان RTL در bootstrap استفاده کنم مجبور میشم که به صورت زیر import کنم و در این صورت دیگر متغیر های SASS رو نمیتونم استفاده کنم.
@import 'bootstrap/dist/css/bootstrap.rtl.min.css';
داکیومنت بوت استرپ گفته که از کتابخانه RTLCSS برای راست چین کردن استفاده میکنه اما من نمیدونم چطور میتونم در لاراول و با استفاده از vite از RTLCSS استفاده کنم.
اگر راهی هست که بشه bootstrap رو به صورت RTL داشته باشم و همزمان از متغیر های SASS اون استفاده کنم ممنون میشم راهنماییم کنید🙏
روش درست رو توضیح میدم اگر کسی مشکلی داشت در این زمینه کمکش کنه
ابتدا این مقدار را در فایل .env خود داشته باشید.
APP_DIRACTION=rtl
نیازمندی ها را نصب کنید
npm i -D dotenv
npm i -D postcss postcss-rtlcss
از تنظیمات زیر در vite.config.js استفاده کنید
import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import postcssRTLCSS from "postcss-rtlcss";
import dotenv from 'dotenv';
const direction = dotenv.config().parsed.APP_DIRACTION;
const config = {
plugins: [
laravel({
input: [
'resources/js/script.js',
],
refresh: true,
}),
],
css: {
...(direction === 'rtl' && {
postcss: {
plugins: [postcssRTLCSS],
},
}),
},
};
export default defineConfig(config);
سلام
من الان سیستم پیشم نیست
ولی فکر میکنم باید با این کار درست بشه
بعد از ایمپورت کردن bootstrap.rtl.min.css
میتونی این فایل رو که شامل متغیرای بوتاسترپه رو ایمپورت کنی
bootstrap/scss/variables.scss
که میشه همون فایل
_variables.scss
این متغیر ها قبل از پردازش sass باید تغییر کنند.
مثلا رنگ primary بوت استرپ رو میشه تغییر داد.
اما bootstrap.rtl.min.css یک فایل پردازش شده است.
روش درست رو توضیح میدم اگر کسی مشکلی داشت در این زمینه کمکش کنه
ابتدا این مقدار را در فایل .env خود داشته باشید.
APP_DIRACTION=rtl
نیازمندی ها را نصب کنید
npm i -D dotenv
npm i -D postcss postcss-rtlcss
از تنظیمات زیر در vite.config.js استفاده کنید
import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import postcssRTLCSS from "postcss-rtlcss";
import dotenv from 'dotenv';
const direction = dotenv.config().parsed.APP_DIRACTION;
const config = {
plugins: [
laravel({
input: [
'resources/js/script.js',
],
refresh: true,
}),
],
css: {
...(direction === 'rtl' && {
postcss: {
plugins: [postcssRTLCSS],
},
}),
},
};
export default defineConfig(config);
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟