vue.js - 使用 vue-i18n 更改网站语言的 nuxt.js 切换（方向和字体）样式

Question

我想将 global.scss (/assets/global.scss) 更改为两个文件，一个用于“fa”语言，另一个用于文件夹资产上的“en”语言。

//globalfa.scss
html{
direction:rtl !important
} 
body{
font-family:'Yekan'
}
//globalen.scss
html{
direction:ltr !important
} 
body{
font-family:'Roboto'
}

这是 header.vue 文件中按钮“fa”和“en”所在的部分：

<div class="d-flex header-inner">
        <b-button
          size="sm"
          class="btn-lang my-2 my-sm-0"
          type="submit"
          @click="setLangFarsi"
          >FA</b-button
        >
        <b-button
          size="sm"
          class="btn-lang my-2 my-sm-0"
          type="submit"
          @click="setLangEnglish"
          >En</b-button
        >
      </div>
<script>
methods: {
  setLangFarsi() {
  this.$i18n.locale = 'fa';
  },
  setLangEnglish() {
  this.$i18n.locale = 'en';
  }

},

</script>

目前 nuxt.config.js 上的 global.scss 已经这样配置：

 ** Global CSS
   */
  css: ['~/assets/scss/global.scss', 'sweetalert2/dist/sweetalert2.min.css'],
  /*

有人会帮助我如何设置两个 global.scss 文件并通过单击 header.vue 文件上的按钮之一在它们之间进行选择？

Answer 1

我通过创建一个类名 rtl-class 来处理它，并像这样使用它：

<div :class="$118n==="fa" ? 'rtl-class' : ''"></div>