Question

我们正在为我的应用程序使用 Vue.js 和 Vuetify 。作为我的应用程序的一部分，我将基于该API响应在页面加载时进行API调用，整个应用程序将呈现所有组件。作为此API的一部分，我将获得名为 cssDirection 的属性，它会告诉应该加载哪个Ls或RTL的css文件。

当我在Angular工作时，我们使用了this方法。

现在我的问题是，有什么解决方法可以在Vue中代替上述方法吗？我用谷歌搜索没有找到任何解决方案。

谢谢

Answer 1

要动态加载CSS文件，您可以执行以下操作

<template>
  <div>
    <button @click="appendFile">Click me to add css file</button>
  </div>
</template>

<script>
export default {
  methods : {
    appendFile(){
      let file = document.createElement('link');
      file.rel = 'stylesheet';
      file.href = 'myfile.css'
      document.head.appendChild(file)
    }
  }
}
</script>

Answer 2

在页面中注入<link>也是可行的，另一种方法是使用webpack的代码拆分。

if (data.rtl) {
  import("./css/rtl.css")
} else {
  import("./css/ltr.css")
}

Answer 3

使用 import("") 从资产加载静态 css，例如，如果您使用多个文件进行样式设置：

在 App.vue 上：

<script setup>
import { useStore } from "vuex";
import { computed, watchEffect } from "@vue/runtime-core";

const store = useStore();
const theme = computed(() => store.state.theme);

watchEffect(() => {
  import(`./assets/css/themes/${theme.value}.css`);
});
<script/>

如何动态加载CSS文件

3 个答案: