سلام و درود
من میخوام از متغیر های 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);شاید پاسخ شما همینجا باشد