افشار محمودیان
6 ماه پیش توسط افشار محمودیان مطرح شد
4 پاسخ

استفاده از متغیر های bootstrap rtl در فایل sass

سلام و درود
من میخوام از متغیر های 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 اون استفاده کنم ممنون میشم راهنماییم کنید🙏


ثبت پرسش جدید
افشار محمودیان
تخصص : برنامه نویس
@afsharmahmoodian 1 ماه پیش آپدیت شد
0

روش درست رو توضیح میدم اگر کسی مشکلی داشت در این زمینه کمکش کنه

ابتدا این مقدار را در فایل .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);

افشار محمودیان
تخصص : برنامه نویس
@afsharmahmoodian 6 ماه پیش مطرح شد
پارسا سجادی
تخصص : فول استک وب
@Dr.Parsa 6 ماه پیش مطرح شد
0

سلام
من الان سیستم پیشم نیست
ولی فکر میکنم باید با این کار درست بشه
بعد از ایمپورت کردن bootstrap.rtl.min.css
میتونی این فایل رو که شامل متغیرای بوت‌استرپه رو ایمپورت کنی

bootstrap/scss/variables.scss
که میشه همون فایل
_variables.scss


افشار محمودیان
تخصص : برنامه نویس
@afsharmahmoodian 6 ماه پیش مطرح شد
0

این متغیر ها قبل از پردازش sass باید تغییر کنند.
مثلا رنگ primary بوت استرپ رو میشه تغییر داد.
اما bootstrap.rtl.min.css یک فایل پردازش شده است.


افشار محمودیان
تخصص : برنامه نویس
@afsharmahmoodian 1 ماه پیش آپدیت شد
0

روش درست رو توضیح میدم اگر کسی مشکلی داشت در این زمینه کمکش کنه

ابتدا این مقدار را در فایل .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);

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام