how to switch between two css style files (rtl , ltr) vue.js

Question

I've got a project in Vue.js with two styles in arabic and english .. the vuebootstrap style is imported as follow in main.js

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

and bootstrap-rtl in head tag inside index.html along side with my custom style.css

the problem here was that the imported files are override my custom css file so I imported as well in main.js

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import '../public/css/erx-style-ar.css'

in order to switch between the rtl and ltr css files I was going to select it by id and disable the file using vuei18. as follow

<a role="button" @click="changeLocale('en')" v-if="$i18n.locale=='ar'">En</a>
<a role="button" @click="changeLocale('ar')" v-if="$i18n.locale=='en'">Ar</a>

and in the function

changeStyle(locale) {
            if (locale === 'ar') {
                document.getElementById("style-ar").disabled = false;
                document.getElementById("bootstrap-rtl").disabled = false;
                document.getElementById("style-en").disabled = true;
            }
            if (locale === 'en') {
                document.getElementById("style-ar").disabled = true;
                document.getElementById("bootstrap-rtl").disabled = true;
                document.getElementById("style-en").disabled = false;
            }
        }

now I actually don't know what is the best solution of this situation.

Have you tried instead of just importing them in main.js have a function which imports based on a parameter (by default you can make it whichever direction you want), then you can call that function which is on main.js to toggle between the styles? — Michael
– Michael, Commented Sep 22, 2019 at 6:08
the more specific css selectors will win out so if you do all your custom css by ids you should be fine. — kpie
– kpie, Commented Oct 8, 2019 at 0:12

Mariam Attallah · Accepted Answer · 2019-11-11 17:54:57Z

2

it was solved by sass , put all rtl css inside a main .en class and all ltr css inside .ar class and swith between them by a condition

<div id="app" v-bind:class="[{'ar' : $i18n.locale=='ar' },{'en':$i18n.locale=='en'}]"></div>

answered Nov 11, 2019 at 17:54

Mariam Attallah

615 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to switch between two css style files (rtl , ltr) vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related