美文网首页
vue中的动态导入样式表

vue中的动态导入样式表

作者: 摩登开发者Oliver | 来源:发表于2021-07-22 20:41 被阅读0次

如果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();

相关文章

  • vue中的动态导入样式表

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

  • 微信小程序开发

    样式导入 使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句...

  • Vue Hello World

    main.js /* 导入 node_modules 中的 Vue 模块 */ import Vue from...

  • Vue中通过Vue.extend动态创建实例

    Vue中通过Vue.extend动态创建实例 在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点...

  • 样式导入

    1、传统导入样式 2、小程序导入样式 使用@import语句可以导入外联样式表,@import后跟需要导入的外联样...

  • 本期小结(一)

    vue★ Vue中引入jQuery vue使用element-ui vue的v-cloak使用 vue动态组件 v...

  • uni-app之Class与样式的绑定

    1.uni-app样式的导入: 全局导入:即在App.vue中的Style标签中导入外联样式,如下: 这样导入每个...

  • Vue-router路由使用

    1.需要导入vue模块 import Vue from 'vue' 需要导入vue-router模块 import...

  • Vue第一部分

    开始使用Vue 步骤: 1.导入Vue的包 2.创建一个Vue的实例。当我们导入包之后,在浏览器的内存中,就多了一...

  • vue面试常见问题

    vue中动态绑定class的方式? watch和computed的区别 vue中key的作用 vue父传子 子传父...

网友评论

      本文标题:vue中的动态导入样式表

      本文链接:https://www.haomeiwen.com/subject/moyymltx.html