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();
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容