实现不同平台的条件引入, 相比之前的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>