如何动态加载css文件

Posted 2023-02-22

【中文标题】如何动态加载css文件

【英文标题】：How to load css file dynamically

【发布时间】：2019-03-16 22:43:55

【问题描述】：

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

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

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

谢谢

【参考方案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/>