vue中的动态导入样式表

如果vue需要根据平台动态导入样式可以这样操作
在main.js中定义一个判断平台的变量：

const ismobile = (/(Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone)/i.test(navigator.userAgent) && "ontouchend" in document) && document.body.clientWidth < 768 ? true : false;

在vue2.x
main.js

const ismobile = (/(Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone)/i.test(navigator.userAgent) && "ontouchend" in document) && document.body.clientWidth < 768 ? true : false;
import (`./assets/less/${(isMobile ? 'mobile' : 'pc')}/main.less`)

在vue3.0 vite中因为import发生在编译前，定义的变量还没有被解析就已经执行这时候找不到变量，所以需要异步来执行懒加载。
main.js

const ismobile = (/(Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone)/i.test(navigator.userAgent) && "ontouchend" in document) && document.body.clientWidth < 768 ? true : false;
let module;
async function importCss() {
  if(isMobile) {
      module = await import('./assets/mobile/less/common.less')
  } else {
      module = await import('./assets/pc/less/common.less')
  }
  return module;
}
importCss();