Conditionally load css file

I have a Ineria/VueJs App, it has a language switcher. I want to update the CSS url depend on user selection. I imported default css using vite inside app.js like this:

import './bootstrap';
import ('../scss/ltr.scss');

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

and inside app.blade.php:

@vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])

I want to update the CSS to rtl version when user selected rtl language. what is the best solution for this?

LaryAI

3 years ago

Level 58

The best solution for this would be to create a separate CSS file for the RTL version and then use a conditional statement to check the user's language selection. If the user has selected RTL, you can then use the link tag to dynamically load the RTL CSS file.

if (userSelectedRTL) {
  const link = document.createElement('link');
  link.setAttribute('rel', 'stylesheet');
  link.setAttribute('type', 'text/css');
  link.setAttribute('href', 'path/to/rtl.css');
  document.head.appendChild(link);
}

Armani

3 years ago

Level 17

@LaryAI As you see it is a scss file so I can not update the DOM.

aruszala

3 years ago

Level 56

@armani , in your vite.config.js file you could try something like this:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel([
            'resources/scss/ltr.scss',
            'resources/scss/rtl.scss',
            'resources/js/app.js',
        ]),
    ],
});

Then in your app.blade.php, you could conditionally load each of them:

@vite(['resources/js/app.js'])

// ... if LTR load this: 
@vite(['resources/scss/ltr.scss'])
// ... If RTL load this:
@vite(['resources/scss/rtl.scss'])

Armani

3 years ago

Level 17

@aruszala Can you be more specific about this part:

// ... if LTR load this: 
@vite(['resources/scss/ltr.scss'])
// ... If RTL load this:
@vite(['resources/scss/rtl.scss'])

How to write the logic?

aruszala

3 years ago

Level 56

@Armani First make sure you installed the sass dependency, run npm add --save-dev sass in the root of your project.

Next, suppose your vite.config.js file looks like this:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            //     input: 'resources/js/app.js',
            input: [
                'resources/scss/ltr.scss',
                'resources/scss/rtl.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

Suppose your resources/scss/rtl.scss file looks like this:

body {
  direction: rtl;
}

Then in your app.blade.php file you could do something like this:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full bg-gray-200">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title inertia>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Scripts -->
        @routes
        @vite('resources/js/app.js')


      
<!-- This logic will be specific to your app, modify this to fit your needs -->
        @if(app()->isLocale('ar'))
            @vite('resources/scss/rtl.scss')
        @else
            @vite('resources/scss/ltr.scss')
        @endif



        @inertiaHead
    </head>
    <body class="h-full font-sans antialiased">
        @inertia
    </body>
</html>

Armani

3 years ago

Level 17

@aruszala Thank you for you reply but because it's Inertia project, the page won't reload eventually.

aruszala

3 years ago

Level 56

@Armani have you considered putting a wrapper class on a root element of your application? This way you could load all your styles ahead of time and just toggle the wrapper class dynamically. Tailwind css does something like this with their dark mode class.

Please or to participate in this conversation.