根据路由参数加载不同样式，实现一套代码相应显示多种主题色项目会嵌入多端，不同端url中添加相应的source参数；现需要

实现目标

项目会嵌入多端，不同端url中添加相应的source参数；现需要不同客户端显示不同的主题色。技术上根据路由的source参数，加载不同的样式。

实现方式

项目使用VUE开发，选择在路由钩子里动态加载。

router.beforeEach((to, from, next) => {
    const source = to.query.source||'';
    import(`../styles/${source}.scss`);
}

即可根据路由加载不同的样式。样式文件配置相应的主题颜色，注意此样式和页面样式的区别。具体如何设计样式自己探索。

失败尝试

if + require

router.beforeEach((to, from, next) => {
   if (source === 'xxxx') {
       require('../styles/xxxx.scss');
   } else {
       require('../styles/dddd.scss');
   }
}

if + require，本地开发没问题，但是发布后出现了两种样式。技术有限也没有阅读相关文档，猜测原因是本地动态编译没问题，而build把两个文件编译到一起了。查看network css发现import方式比if + require多两个文件。