如何动态加载CSS文件 [英] How to load css file dynamically

问题描述

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

We are using Vue.js and Vuetify for my application. As part of my application, I will make API call on page load based on that API response entire application will render all the components. As part of this API, I will get property named as cssDirection and it tells which css file suppose to load either it's LTR or RTL.

当我在Angular工作时，我们使用了此方法.

When I worked in Angular, We used this approach.

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

Now my question is there any workaround to achieve this in Vue instead of the above approach ? I googled I didn't find any solutions.

谢谢

推荐答案

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

To load css file dynamically you can do somethings like this

<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>

这篇关于如何动态加载CSS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！