Javascript 如何根据Vue JS中Axios的结果动态加载SCSS文件

在我的Vue应用程序中，我希望动态更改主题。也就是说，我为不同类型的用户创建了3个不同的主题，还创建了一个API调用来识别登录的用户类型。基于API调用的这个结果，我想更改Vue应用程序的主题。主题文件位于

SCSS

中，我已将我的

App.vue

文件附在下面

<template>
  <div id="app">
    <component :is="layout">
    </component>
  </div>
</template>

<script>
  import Pages from "./mixins/PagesScripts";

  const defaultLayout = "default-layout";
  export default {
    name: 'App',
    computed: {
      layout() {
        // TODO: Implement more layout and layout rendering mechanisms here
        return defaultLayout;
      }
    },
    mixins: [Pages],
    mounted(){
      // Here I will call the API using Axios and based on the API result, I want to change the 
      // below SCSS file to pages1,pages2 etc..
    }
  };
</script>
<style lang="scss">
  @import "assets/scss/pages";
</style>

从“/mixins/pagescripts”导入页面；
const defaultLayout=“默认布局”；
导出默认值{
名称：“应用程序”，
计算：{
布局（）{
//TODO:在此处实现更多布局和布局渲染机制
返回默认布局；
}
},
混合：[页]，
安装的（）{
//在这里，我将使用Axios调用API，并根据API结果更改
//以下SCSS文件至第1页、第2页等。。
}
};
@导入“资产/SCS/页面”；

---

如果您不想一次加载所有主题（主题很重或有很多主题），我使用的是Vue CLI版本

4.4.6

），可以选择将

注入标题。但是这对于开发过程和用户体验来说都不是很灵活

/。。。
方法：{
注射针阀（针阀）{
this.file=document.createElement（'link'）；
file.rel='stylesheet'；
file.href=file
document.head.appendChild（文件）
},
更新名称文件（名称文件）{
this.file.setAttribute（'href'，themeFile）
}
}
// ...

一个更简单的方法是加载所有主题，以使用户切换顺畅。但通常，您可以将主题定义为一组CSS变量，并根据（比如）属性对其进行更改，例如：

。。。

然后像这样使用：

/*all.css*/
：：根{
--文字颜色：黑色；
}
/*red.css*/
正文[主题=红色]{
--文字颜色：红色；
}
/*green.css*/
正文[主题=红色]{
--文字颜色：绿色；
}
/*在组件中*/
p{
颜色：var（--文本颜色）；
}