如何动态加载css文件答案

【问题标题】：How to load css file dynamically如何动态加载css文件
【发布时间】：2019-03-16 22:43:55
【问题描述】：

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

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

现在我的问题是有什么解决方法可以在 Vue 中实现这一点而不是上述方法？我用谷歌搜索我没有找到任何解决方案。

谢谢

【问题讨论】：

标签： css vue.js vuetify.js

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

它是否适用于从 CDN 等外部源加载 CSS 文件？
不是开箱即用的，有 openbase.io/js/webpack-external-import 的插件，但除非它在你的代码库中经常发生，否则我建议像其他答案建议的那样手动将它添加到 dom

【解决方案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/>

【讨论】：