MellowCo/unocss-preset-weapp

不支持H5吗

Closed this issue · 10 comments

Shigukj commented

image
image
加了这两个配置就转义成这样了，不加的话H5还是rpx

MellowCo commented

你是按照选对应的版本配的吗

image

Shigukj commented

是啊我用的 uniapp-vue3 。加了一个unocss 的 transformerDirectives 插件

Shigukj commented

。我知道了，是不兼容 transformerDirectives 。 H5端的时候 @apply 里的单位解析失败

  • 👍1
Shigukj commented

能兼容吗 大佬

chengazhen commented

image

你这个指令有加 enforce 吗

  • 👍1
Shigukj commented

image

解决了。
H5的时候加个enforce ，并且transformerDirectives 要放在前面先执行。
小程序的时候要放在后面，不然有问题

chengazhen commented

我这边都是放在第一个的，是没有问题的。感觉这个执行的逻辑跟vite也是有关的。
image

你要强制指令在 uni 插件之前执行。如果在uni插件之后那么肯定不会被转换的。这是 vite 的相关说明 https://vitejs.dev/guide/using-plugins.html#enforcing-plugin-ordering

Shigukj commented

按照你说的，vite配置unocss()放到uni()前面，transformerDirectives()和你一样放前面 试了下。小程序端还是不行。
image

MellowCo commented 
<template>
  <view class="bg-to-t">
    apply bg-to-t
  </view>

  <view class="bg-unocss" />

  <view class="bg-to-r">
    apply bg-to-r
  </view>
</template>

<style scoped>
.bg-to-t {
  @apply center w-500 h-200 rounded-md bg-gradient-to-t from-#f39c12/60 via-#2ecc71:80 to-#9b59b6_70 mb-3;
}

.bg-unocss{
  @apply w-100 h-100 bg-cover mb-3 bg-[url(https://img.cdn.sugarat.top/mdImg/MTY2ODA4OTc3MjcyMg==unocss-icon-gray.svg)] m-auto;
}

.bg-to-r{
  --at-apply: center h-200 rounded-md bg-gradient-to-r from-#f39c12/60 via-#2ecc71:80 to-#9b59b6_70 mb-3
}
</style>

image

image

MellowCo commented

我就加了 enforce: 'pre'，小程序和h5都没问题

参考这个吧

https://github.com/MellowCo/unocss-preset-weapp/tree/main/examples/uniapp_vue3

image