UnoCSS Applet

在小程序(UniApp 和 Taro)中使用UnoCSS，兼容不支持的语法。

预设和插件

unocss-applet - 主包，包含所有预设和插件。
@unocss-applet/preset-applet - 默认预设（等同于@unocss/preset-wind3）。
@unocss-applet/preset-rem-rpx - 转换rem <=> rpx的工具。
@unocss-applet/transformer-attributify - 为小程序启用 Attributify 模式。
@unocss-applet/reset - CSS 样式重置集合。

安装

npm i unocss-applet --save-dev # with npm
yarn add unocss-applet -D # with yarn
pnpm add unocss-applet -D # with pnpm

使用

UnoCSS 配置

<summary>uno.config.ts</summary>

ts
import type { Preset, SourceCodeTransformer } from 'unocss'
import { defineConfig, presetAttributify } 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,
  ],
})

平台配置

<summary>UniApp + Vue3 + Vite</summary>
vite.config.ts（UnoCSS v0.58 和更低版本）/ vite.config.mts（UnoCSS v0.59 和更高版本）

ts
// use @uni-helper/plugin-uni support ESM
import Uni from '@uni-helper/plugin-uni'
import UnoCSS from '@unocss/vite'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    Uni(),
    UnoCSS() as any,
  ],
})

main.ts

ts
import 'uno.css'

<summary>Taro v3.6 + Vue3 + Webpack5</summary>
config/index.js（UnoCSS v0.59 和更高版本）

js
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 和更低版本）

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

ts
import 'uno.css'

示例

感谢

UnoCSS

Détail du package

unocss-applet

UnoCSS Applet

readme

UnoCSS Applet

预设和插件

安装

使用

UnoCSS 配置

平台配置

示例

感谢

License