2개의 css 스타일파일(rtl, ltr) vue.display 간에 전환하는 방법

2개의 css 스타일파일(rtl, ltr) vue.display 간에 전환하는 방법

아랍어와 영어 두 가지 스타일로 Vue.js에서 프로젝트를 진행하고 있습니다.vuebootstrap 스타일은 main.defaults에서 다음과 같이 Import됩니다.

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

및 bootstrap-rtl은 index.side의 헤드태그에 포함되어 있습니다.css는 커스텀스타일에 따라 달라집니다.

여기서의 문제는 Import된 파일이 커스텀 css 파일보다 우선된다는 것입니다.main.js에서도 Import했습니다.

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

rtl 파일과 ltr css 파일 간에 전환하기 위해 다음과 같이 id별로 선택하고 vuei18을 사용하여 파일을 비활성화하려고 했습니다.

<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>

그리고 함수에서

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;
            }
        }

지금 저는 사실 이 상황에 대한 최선의 해결책이 무엇인지 모르겠어요.

이것은 sass에 의해 해결되었습니다.모든 rtl css를 메인 .en 클래스 안에 넣고 모든 ltr css를 .ar 클래스 안에 넣고 조건에 따라 이들 사이에 스위트합니다.

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

언급URL : https://stackoverflow.com/questions/58043842/how-to-switch-between-two-css-style-files-rtl-ltr-vue-js