vite2 根据平台动态引入css/less

原创
2021/03/05 22:34
阅读数 5.5K

 

原文链接: vite2 根据平台动态引入css/less

上一篇: ua-parser-js 判断设备类型和版本 针对不同的机型做降级

下一篇: webstorm 配置powershell 命令行

实现不同平台的条件引入, 相比之前的jss, 这种方式比较适合做兼容性处理, 并且有不错的提示, 因为写的都是less

 

根据不同的平台设置不同的css, 主要是在不同平台做兼容处理时, 不能将其带到其他平台中

vite中这些都是开箱即用的, 只需要注意使用函数动态引入, 否则会在一开始就将两个都引入进来, 这样哪个最后加载就会生效

<template>
  <router-view></router-view>
</template>
<script lang="ts" setup>
import { injectGlobal } from "@emotion/css";
import { onMounted } from "vue";
const styleMap = {
  ios: () => import("./ios.less"),
  pc: () => import("./pc.less"),
};
onMounted(async () => {
  const type = "pc";
  const style = (await styleMap[type]()).default;
  injectGlobal(style);
  console.log("style", type, style);
});
</script>
<style>
#app {
  @apply flex w-screen h-screen;
}
</style>

 

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部
返回顶部
顶部