實現不同平台的條件引入, 相比之前的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>