UnoCSS Applet
在小程序(UniApp 和 Taro)中使用UnoCSS，兼容不支持的语法。
预设和插件
- unocss-applet - 主包，包含所有预设和插件。
- @unocss-applet/preset-applet - 默认预设（等同于
@unocss/preset-uno）。 - @unocss-applet/preset-rem-rpx - 转换rem <=> rpx的工具。
- @unocss-applet/transformer-applet - 转换小程序不支持的选择器。
- @unocss-applet/transformer-attributify - 为小程序启用 Attributify 模式。
安装
npm i unocss-applet --save-dev # with npm
yarn add unocss-applet -D # with yarn
pnpm add unocss-applet -D # with pnpm
使用
UnoCSS 配置
unocss.config.ts
import type { Preset, SourceCodeTransformer } from 'unocss'
import { defineConfig } from 'unocss'
import {
presetApplet,
presetRemRpx,
transformerApplet,
transformerAttributify,
} from 'unocss-applet'
// uni-app
const isApplet = process.env?.UNI_PLATFORM?.startsWith('mp-') ?? false
// taro
// const isApplet = process.env.TARO_ENV !== 'h5' ?? false
const presets: Preset[] = []
const transformers: SourceCodeTransformer[] = []
if (isApplet) {
presets.push(presetApplet())
presets.push(presetRemRpx())
transformers.push(transformerAttributify({ ignoreAttributes: ['block'] }))
transformers.push(transformerApplet())
}
else {
presets.push(presetApplet())
presets.push(presetAttributify())
presets.push(presetRemRpx({ mode: 'rpx2rem' }))
}
export default defineConfig({
presets: [
// ...
...presets,
],
transformers: [
// ...
...transformers,
],
})
平台配置
For UniApp with Vue3 and Vite
vite.config.ts
import UnoCSS from 'unocss/vite'
export default {
plugins: [
UnoCSS(),
],
}
main.ts
import 'uno.css'
For Taro(v3.5.6) with Vue3 and Webpack5
config/index.js
import UnoCSS from 'unocss/webpack'
const config = {
mini: {
// ...
webpackChain(chain, _webpack) {
chain.plugin('unocss').use(UnoCSS())
},
},
h5: {
// ...
webpackChain(chain, _webpack) {
chain.plugin('unocss').use(UnoCSS())
},
},
}
app.ts
import 'uno.css'
