在 uniapp 里使用 unocss，vue3 + vite 项目

一、创建项目方式：vue-cli

二、基本的安装

node 复制代码

npm install -D unocss

三、vite.config.js

js 复制代码

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import UnoCSS from 'unocss/vite'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    uni(),
    UnoCSS()
  ],
  server: {
      port: 6321,
      host: '0.0.0.0',
	  }
})

四、main.js

js 复制代码

import {
	createSSRApp
} from "vue";
import App from "./App.vue";

import 'virtual:uno.css'
export function createApp() {
	const app = createSSRApp(App);
	return {
		app,
	};
}

五、unocss.config.js

unocss-preset-weapp 是一个专为微信小程序和 UniApp 设计的 UnoCSS 预设，它内置了 rpx 单位支持，并可以自动处理 rem 转换问题10。

安装：

node 复制代码

npm i unocss-preset-weapp -D

js 复制代码

// unocss.config.js

import presetWeapp from "unocss-preset-weapp";

import {
  transformerClass,
  transformerAttributify,
} from "unocss-preset-weapp/transformer";
import { defineConfig, presetAttributify } from "unocss";
const directionMap = {
  t: "top",
  b: "bottom",
  r: "right",
  l: "left",
  x: ["left", "right"], // 水平方向
  y: ["top", "bottom"], // 垂直方向
};

export default {
  presets: [
    presetAttributify(),
    presetWeapp({
      whRpx: true, // 启用 rpx 单位（默认 true）
      platform: "uniapp", // 或 'uniapp'
      designWidth: 750,
    }),
  ],
  transformers: [transformerAttributify(), transformerClass()],
  shortcuts: [],
  rules: [
    // 基础间距
    [/^m-(\d+)$/, ([, d]) => ({ margin: `${d}rpx` })],
    [/^p-(\d+)$/, ([, d]) => ({ padding: `${d}rpx` })],

    // 方向性间距（修正版）
    [
      /^m([tbrlxy])-(\d+)$/,
      ([, dir, d]) => {
        const directions = Array.isArray(directionMap[dir])
          ? directionMap[dir]
          : [directionMap[dir]];

        return Object.fromEntries(
          directions.map((k) => [`margin-${k}`, `${d}rpx`])
        );
      },
    ],

    [
      /^p([tbrlxy])-(\d+)$/,
      ([, dir, d]) => {
        const directions = Array.isArray(directionMap[dir])
          ? directionMap[dir]
          : [directionMap[dir]];

        return Object.fromEntries(
          directions.map((k) => [`padding-${k}`, `${d}rpx`])
        );
      },
    ],

    // 负值支持
    [
      /^-m([tbrlxy])?-(\d+)$/,
      ([, dir, d]) => {
        if (!dir) return { margin: `-${d}rpx` };

        const directions = Array.isArray(directionMap[dir])
          ? directionMap[dir]
          : [directionMap[dir]];

        return Object.fromEntries(
          directions.map((k) => [`margin-${k}`, `-${d}rpx`])
        );
      },
    ],
    [
      "center",
      {
        position: "absolute",
        top: "50%",
        left: "50%",
        transform: `translate(-50%, -50%)`,
      },
    ],
    [
      "shadow1",
      {
        "box-shadow": "0px 0px 12px rgba(0, 0, 0, .12)",
      },
    ],
    [
      /^border-#([0-9a-fA-F]+)$/,
      ([_, color]) => ({
        border: `1px solid #${color}`,
      }),
    ],
    [
      "trans",
      {
        transition: ".3s",
      },
    ],
  ],
};

为什么这里要写这么一大段自定义规则，因为这个插件有bug，目前已经反馈了，希望以后可以更新修复，贴上 github issue 截图