核心是动态引入的模板字符串
import (../styles${url}
)
JS文件中,这里通过接口返回结果判断
import { getUserInfo } from '@api/user'
getUserInfo({}).then(res => {
let url = res.data.sex==1?'/ele-variables.scss':'/ele-variables-teacher.scss'
import (`../styles${url}`)
})
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>