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.