The core is the dynamically introduced template string
import ( ../styles${url}
)
In the JS file, the result judgment is returned through the interface
import {
getUserInfo } from '@api/user'
getUserInfo({
}).then(res => {
let url = res.data.sex==1?'/ele-variables.scss':'/ele-variables-teacher.scss'
import (`../styles${
url}`)
})
During VUE
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
import {
getUserInfo } from '@api/user'
export default {
created() {
this.chooseCss()
},
methods: {
// 在根组件 根据用户类型 新增全局样式选择
chooseCss(){
getUserInfo({
}).then(res => {
let url = res.data.sex==2?'/teacher.css':'/normal.css'
import (`./styles${
url}`)
})
}
},
};
</script>