Using UnoCSS in applet(for UniApp and Taro) to be compatible with unsupported syntax.
English | 简体中文
- unocss-applet - The default package with common presets and plugins.
- @unocss-applet/preset-applet - The default preset (right now it's equivalent to
@unocss/preset-uno). - @unocss-applet/preset-rem-rpx - Coverts rem <=> rpx for utils.
- @unocss-applet/transformer-attributify - Enables Attributify Mode for applet.
- @unocss-applet/reset - Collection of reset CSS stylesheets.
npm i unocss-applet --save-dev # with npm
yarn add unocss-applet -D # with yarn
pnpm add unocss-applet -D # with pnpmuno.config.ts
import type { Preset, SourceCodeTransformer } from 'unocss'
import { defineConfig } from 'unocss'
import {
presetApplet,
presetRemRpx,
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'] }))
}
else {
presets.push(presetApplet())
presets.push(presetAttributify())
presets.push(presetRemRpx({ mode: 'rpx2rem' }))
}
export default defineConfig({
presets: [
// ...
...presets,
],
transformers: [
// ...
...transformers,
],
})UniApp + Vue3 + Vite
vite.config.ts (UnoCSS v0.58 or below) / vite.config.mts (UnoCSS v0.59 or above)
import uniModule from '@dcloudio/vite-plugin-uni'
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'
// @ts-expect-error missing types
const Uni = uniModule.default || uniModule
export default defineConfig({
plugins: [
Uni(),
UnoCSS(),
],
})main.ts
import 'uno.css'Taro v3.6 + Vue3 + Webpack5
config/index.js (UnoCSS v0.59 or above)
import { createSwcRegister, getModuleDefaultExport } from '@tarojs/helper'
export default async () => {
createSwcRegister({
only: [filePath => filePath.includes('@unocss')],
})
const UnoCSS = getModuleDefaultExport(await import('@unocss/webpack'))
return {
mini: {
// ...
webpackChain(chain, _webpack) {
chain.plugin('unocss').use(UnoCSS())
}
},
h5: {
// ...
webpackChain(chain) {
chain.plugin('unocss').use(UnoCSS())
}
}
}
}config/index.js (UnoCSS v0.58 or below)
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'MIT License © 2022-PRESENT Neil and all contributors.