MellowCo/unocss-preset-weapp

uni-app vue3 使用unocss后,小程序编译后\未转义,请问是什么问题

Closed this issue · 5 comments

"vue": "^3.2.45",
"unocss": "^0.58.5",
"unocss-preset-weapp": "^0.58.6",
uno.config.ts已经按照文档配置了extractorAttributify,和transformerClass
image

是哪段代码的问题吧

看下原代码

在issues中找到了答案,是预设presetUno 的问题,但是去掉预设后,页面元素高度等一些样式失效,有其他替代预设吗?还是说小程序所有预设都不能使用?
// uno.config.ts
import presetWeapp from 'unocss-preset-weapp'
import { extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer'

const { presetWeappAttributify, transformerAttributify } = extractorAttributify()
import { entriesToCss } from '@unocss/core'
import { theme } from '@unocss/preset-mini'
import { defineConfig, presetUno } from 'unocss'

export default defineConfig({
presets: [
presetWeapp(),
presetWeappAttributify(),
presetUno(),
],
theme: {
preflightBase: undefined,
colors: {
'primary-color': '#FF6B01',
bgColor: '#F17420',
buttonColor: '#FF6E1B',
},
},
preflights: [
{
getCSS: () => {
const css = entriesToCss(Object.entries(theme.preflightBase!))
const selector = process.env.UNI_PLATFORM === "mp-weixin" ? "view" : "*";
return ${selector},::before,::after{${css}}::backdrop{${css}}
},
},
],
rules: [

],
shortcuts: {
	'flex-center': 'flex flex-row items-center justify-center',
	'flex-between': 'flex flex-row items-center justify-between',
	'flex-wrap': 'flex flex-row flex-wrap',
	'flex-col-center': 'flex flex-col justify-center items-center',
	'content-none': 'text-sm text-gray absolute top-1/2 left-1/2 transform -translate-1/2'
},
transformers: [
	transformerAttributify(),
	transformerClass(),
]

})

presetWeapp 包含了 presetmini 的预设的

是什么缺失了