优点：
浏览器原生支持，无需额外操作
支持动态色值
缺点：
低版本兼容性不好
ios Safari 9.3、 android 5、 chrome forAndroid 76UC、QQ、Baidu 等国内浏览器支持度较差
方式七： import动态加载
实现：
业务中预定义多套主题
运行时根据变量动态加载对应主题
if(a){
import('./thems/a/base.less')
}else if(b){
import('./thems/b/base.less')
}优点：
支持动态切换
实现简单
缺点：
不支持动态色值
需要全局定义多套样式表
全局定义 class 无法定义变量在 vue style 中引用变量
| 方式 | 动态切换 | 动态色值 | 支持变量 | 实现复杂度 | 兼容性 | 性能 | 维护性 |
|---|---|---|---|---|---|---|---|
| class切换方式 | 是 | 否 | 是 | 简单 | 良好 | 良好 | |
| ElementUI的实现 | 是 | 是 | 是 | 中等 | 良好 | 一般 | |
| 编译时多主题全量构建 | 是 | 否 | 是 | 复杂 | 良好 | 一般 | |
| 编译时选择性构建 | 否 | 否 | 是 | 中等 | 良好 | 良好 | |
| less变量 | 是 | 是 | 否 | 复杂 | 良好 | 差 | |
| css变量 | 是 | 是 | 是 | 中等 | 差 | 良好 | |
| import动态加载 | 是 | 否 | 否 | 简单 | 良好 | 良好 |
注：
动态切换：是否支持在运行时切换皮肤
动态设置：是否支持在运行时动态设置皮肤颜色
支持变量：是否可以再全局定义变量 less 文件，然后在不同的页面引用 less，依赖其中的变量，还是需要在全局 less 文件里面定义全局 class
实现复杂度： 需要修改的代码量包括构建工具和业务代码
兼容性： 主流浏览器支持程度
性能：包括代码的首屏加载的 size、切换的速度、切换的时候会不会有闪动
参考资料：
https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/theme.html#样式覆盖
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Alternative_style_sheets
https://less.bootcss.com
