HBuilder Cli创建的uniapp项目，引入unoCss插件

需要注意区分HBuilderX cli和uni cli,本文使用的是HBuilderX cli
链接: link.

插件安装

// package.json"dependencies": {"unocss-preset-weapp": "^66.0.2"},"devDependencies": {"@unocss/preset-rem-to-px": "0.58.6","@unocss/transformer-directives": "0.58.6","@unocss/transformer-variant-group": "0.58.6","unocss": "^0.58.9"}

配置uno

根目录下（与main.js同级）创建uno.config.js文件。

/*** UnoCSS 配置定义文件* 用于配置 UnoCSS 的预设、转换器、快捷方式和规则*/import presetWeapp from "unocss-preset-weapp";
import presetRemToPx from "@unocss/preset-rem-to-px";
import { defineConfig, toEscapedSelector as e, presetUno } from "unocss";
import {transformerClass,transformerAttributify,
} from "unocss-preset-weapp/transformer";
import transformerVariantGroup from "@unocss/transformer-variant-group";
import transformerDirectives from "@unocss/transformer-directives";/*** 导出 UnoCSS 配置* @returns {Object} UnoCSS 配置对象*/
export default defineConfig({// 预设配置presets: [// UnoCSS 基础预设，禁用属性化模式presetUno({ dark: "class", attributify: false }),// 微信小程序专用预设presetWeapp(),// 将 rem 转换为 px 的预设，基础字体大小为 4pxpresetRemToPx({baseFontSize: 4,}),],// 转换器配置transformers: [// 属性化转换器transformerAttributify(),// 类名转换器transformerClass(),transformerVariantGroup(),transformerDirectives(),],// 快捷方式定义shortcuts: [{flexCenter: "flex items-center justify-center", // 居中布局column: "flex-col", // 垂直布局flow: "flex-row flex-nowrap items-center", // 水平流动布局width: "w-full", // 全宽height: "h-full", // 全高comAre: "w-full box-border", // 通用区域样式},],// 内容处理配置content: {pipeline: {// 包含的文件类型正则匹配include: [/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html|ts)($|\?)/],},},// 自定义规则rules: [// 文本溢出显示省略号规则[/^overflow-ellipsis$/,([], { rawSelector }) => {const selector = e(rawSelector);return `${selector} {text-overflow: ellipsis;}`;},],// 灵活布局对齐规则[/^flex-(.*)$/,([, c], { rawSelector }) => {const selector = e(rawSelector);const justifyMap = ["flex-start","flex-end","center","space-between","space-around",];const corr = justifyMap.find((v) => v.includes(c));return `${selector} {justify-content: ${corr};}`;},],// 单行文本溢出隐藏规则[/^fontHide$/,([], { rawSelector }) => {const selector = e(rawSelector);return `${selector} {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}`;},],// 两行文本溢出隐藏规则[/^fontHide2$/,([], { rawSelector }) => {const selector = e(rawSelector);return `${selector} {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}`;},],],
});

可以根据自己项目需求修改，也可以使用uno默认的配置。

main.js文件

引入插件

import "uno.css";

vite.config.js文件

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import Unocss from "unocss/vite";export default defineConfig(async () => {return {plugins: [uni(), Unocss()],define: {"process.env.VUE_APP_TEST": JSON.stringify("test"),},};
});

完成

到这就完成了，可以在.vue文件中配置使用了。

  <div class="flex color-red ml-30px" @click="loginFun()">登录页</div>