Unocss 与 Uni-APP

1. 什么是Unocss

即时按需的原子级CSS引擎

2. 集成到项目

1. 安装依赖

yarn add -D unocss

2. 修改 vite.config.ts文件

import {defineConfig} from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import UnoCSS from 'unocss/vite'

export default defineConfig({
    plugins: [uni(), UnoCSS()],

});

3. 创建uno.config.ts 文件

4. 将 virtual:uno.css代码添加到main.ts主入口文件：

import {createSSRApp} from "vue";
import App from "./App.vue";
import 'virtual:uno.css'

export function createApp() {
    const app = createSSRApp(App);
    return {
        app,
    };
}

3. 使用Unocss

1. 自定义预设 presets

预设是 UnoCSS 的核心。在几分钟内制作自己的自定义框架。

import {defineConfig, presetUno} from 'unocss'

export default defineConfig({
    presets: [
        presetUno({
            prefix: 'uc-',
        }),
    ]
})

1. 这串代码中我们通过presetUno 自定义预设 设置了前缀 uc-
2. 使用 class="uc-m-20"

<template>
  <uni-section title="实心标签" type="line" padding>
    <view class="example-body">
      <view class="uc-m-20">
        <uni-tag text="标签" type="primary"/>
      </view>
    </view>
  </uni-section>
</template>

这里打开浏览器检查可以看到样式已经生效，可是单位是rem

2. 改变rem转换基数

通过 postprocess 后处理 把每一个 rem都转换为 4rpx

import {defineConfig, presetUno} from 'unocss'

const remRE = /(-?[.\d]+)rem/g

export default defineConfig({
    presets: [
        presetUno(),
    ],
    shortcuts: [
        {
            'border-base': 'border border-gray-500_10',
            'center': 'flex justify-center items-center',
        },
    ],
    postprocess: [
        obj => {
            obj.entries.forEach(i => {
                const value = i[1];
                if (typeof value === 'string' && remRE.test(value)) {
                    i[1] = value.replace(remRE, (_, p1) => `${(p1 * 4)}rpx`)
                }
            })
        }
    ]
})

• shortcuts 快捷方式

需要使用快捷方式 就不带前缀

2. 社区预设

自我感觉 社区预设不好用

1. unocss-applet
2. unocss-preset-weapp