如何在Vue.js中切换两个CSS样式文件（RTL，LTR）

Question

我有一个用Vue.js编写的项目，其中包含阿拉伯语和英语两种样式.. 在main.js中可以通过以下方式导入vuebootstrap样式

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

在index.html的head标签中导入bootstrap-rtl以及我的自定义style.css文件，并且在main.js中也进行了导入，原因是这些被导入的文件会覆盖我的自定义css文件。

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

我其实不知道这种情况的最佳解决方案。

- Mariam Attallah

---

你尝试过在 main.js 中编写一个函数，根据参数导入不同的文件（默认情况下可以设置为任意方向），然后调用该函数以在样式之间切换吗？ - Michael

具体的 CSS 选择器会覆盖一般的选择器，所以如果你所有的自定义 CSS 都使用 ID 来编写，那么就没问题了。 - kpie

Answer 1

这个问题可以通过使用Sass解决，将所有RTL（从右到左）的CSS放在一个主要的.en类中，将所有LTR（从左到右）的CSS放在.ar类中，并通过条件来切换它们。

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

- Mariam Attallah