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

【问题标题】：nuxt.js switch (direction and font) style on changing website language using vue-i18n使用 vue-i18n 更改网站语言的 nuxt.js 切换（方向和字体）样式
【发布时间】：2021-04-25 08:12:30
【问题描述】：

我想将 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 文件上的其中一个按钮在它们之间进行选择吗？

【问题讨论】：

标签： vue.js sass nuxt.js vue-i18n nuxt.config.js

【解决方案1】：

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

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

【讨论】：