uniapp+unocss

uniapp+unocss

1.安装

安装unocss

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

安装unocss-applet

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

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

配置

在根目录新建uno.config.ts

import type { Preset, SourceCodeTransformer } from "unocss"
import { defineConfig, presetAttributify } from "unocss"

import { presetApplet, presetRemRpx, transformerAttributify } from "unocss-applet"

// uni-app，mp-开头的平台为小程序
const isApplet = process.env?.UNI_PLATFORM?.startsWith("mp-") ?? 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())
  // h5模式，将rpx转换为rem
  presets.push(presetRemRpx({ mode: "rpx2rem" }))
}

export default defineConfig({
  presets: [
    // ...
    ...presets
  ],
  rules: [],
  transformers: [
    // ...
    ...transformers
  ]
})

通过这个语句判断启动的是不是小程序

const isApplet = process.env?.UNI_PLATFORM?.startsWith("mp-") ?? false

在vite.config.ts中引入

import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS(),
  ],
}

在main.ts中引入

// main.ts
import "uno.css"

3.使用

在index.vue中使用

<template>
  <view class="pinia">
    <view class="name m-120rpx"> 用户名 </view>
  </view>
</template>

<script lang="ts" setup></script>

其中m-120rpx，在h5中会转换成rem,在小程序中为rem

4.想在里面使用tailwindcss中的某些语法

在一开始使用border-b-2是发现不生效，发现需要引入import "@unocss-applet/reset/uni-app/tailwind.css"
首先需要安装@unocss-applet/reset

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

并且main.ts在引入

import { createSSRApp } from "vue"
import App from "./App.vue"
import store from "./store"
import { i18n } from "@/locales/index"
import "virtual:uno.css"
import "@unocss-applet/reset/uni-app/tailwind.css"  // 新增++
export function createApp() {
  const app = createSSRApp(App)
  app.use(i18n)
  app.use(store)
  return {
    app
  }
}