一步步配置 UnoCSS 与 Vite，让你的项目更高效、微信小程序中如何使用UnoCSS和问题解决简要介绍 Vite

1、Vite 和 UnoCSS 简介

Vite：快速的构建工具，支持热更新和快速构建。
UnoCSS：原子化 CSS 库，按需生成 CSS 类，减少最终生成的样式体积。

2、安装 UnoCSS 到 Vite 项目

安装 UnoCSS 插件：

npm install unocss --save-dev
yarn add unocss --save-dev

配置 Vite 配置文件 (vite.config.ts):

import { defineConfig } from 'vite'
import UnoCSS from 'unocss/vite'

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

UnoCSS 配置

新建uno.config.ts文件

// uno.config.js
import { defineConfig } from 'unocss'
export default defineConfig({

})

main.ts配置

引入 import 'virtual:uno.css'

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

unocss还给我们提供了一个提供了一套常用的、非常基础的原子化 CSS 类@unocss/preset-uno 是 UnoCSS 的官方预设之一，是 UnoCSS 默认的核心预设

安装@unocss/preset-uno

npm install @unocss/preset-uno --save-dev

配置 @unocss/preset-uno

在 vite.config.ts 或 unocss.config.ts 配置文件中使用 @unocss/preset-uno：

vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite'
import UnoCSS from 'unocss/vite'
import presetUno from '@unocss/preset-uno'

export default defineConfig({
  plugins: [
    UnoCSS({
      presets: [
        presetUno(), // 使用 Uno 预设
      ],
    }),
  ],
})

unocss.config.ts

// uno.config.js
import { defineConfig } from 'unocss'
import presetUno from '@unocss/preset-uno'
export default defineConfig({
    presets: [
        presetUno(),
    ],
})

接下来你就可以在项目中使用了...

如果你想在微信小程序里面使用UnoCSS，需要配置unocss-preset-weapp

unocss-preset-weapp 是专门为微信小程序设计的预设，它会生成适用于小程序的类和样式

配置`unocss-preset-weapp`

npm install unocss-preset-weapp --save-dev
yarn add unocss-preset-weapp --save-dev

然后在 uno.config.ts 中添加该预设：

import { defineConfig } from 'unocss'
import presetWeapp from 'unocss-preset-weapp'
export default defineConfig({
    content: {
        files: [
            '**/*.{wxml,wxss,html,vue,svelte,jsx,tsx,mdx,astro,elm,php,phtml}', // 使用 glob 模式匹配文件
            'src/**/*.{js,ts}',  // 确保扫描 src 下的 JS/TS 文件
        ],
    },
    presets: [
        presetWeapp(),
    ],
    separators:'__'
})

接下来就可以在微信小程序里面使用了...

遇见的问题...

1、单位换算不统一

可以在写单位的时候加上rpx

<view class="color-amber w-40rpx p-40rpx">11</view>

在uno.config.ts配置rules进行覆盖

// uno.config.js
import { defineConfig } from 'unocss'
import presetWeapp from 'unocss-preset-weapp'
export default defineConfig({
    content: {
        files: [
            '**/*.{wxml,wxss,html,vue,svelte,jsx,tsx,mdx,astro,elm,php,phtml}', // 使用 glob 模式匹配文件
            'src/**/*.{js,ts}',  // 确保扫描 src 下的 JS/TS 文件
        ],
    },
    presets: [
        presetWeapp(),
    ],
    rules: [
        [/^p-?(\d+)$/, ([, d]) => ({ padding: `${d}rpx` })],
        [/^p-?t-?(\d+)$/, ([, d]) => ({ 'padding-top': `${d}rpx` })],
        [/^p-?b-?(\d+)$/, ([, d]) => ({ 'padding-bottom': `${d}rpx` })],
        [/^p-?l-?(\d+)$/, ([, d]) => ({ 'padding-left': `${d}rpx` })],
        [/^p-?r-?(\d+)$/, ([, d]) => ({ 'padding-right': `${d}rpx` })],

        [/^m-?(\d+)$/, ([, d]) => ({ margin: `${d}rpx` })],
        [/^m-?t-?(\d+)$/, ([, d]) => ({ 'margin-top': `${d}rpx` })],
        [/^m-?b-?(\d+)$/, ([, d]) => ({ 'margin-bottom': `${d}rpx` })],
        [/^m-?l-?(\d+)$/, ([, d]) => ({ 'margin-left': `${d}rpx` })],
        [/^m-?r-?(\d+)$/, ([, d]) => ({ 'margin-right': `${d}rpx` })],
    ],
    separators:'__'
})

2、class冲突

使用 prefix 和 separators：设置 prefix 和 separators 可以帮助你生成更加符合小程序要求的简短类名。

import { defineConfig } from 'unocss'
import presetUno from '@unocss/preset-uno'
import presetWeapp from 'unocss-preset-weapp'

export default defineConfig({
  content: {
    files: [
      '**/*.{wxml,html,vue,svelte,jsx,tsx,mdx,astro,elm,php,phtml}',
      'src/**/*.{js,ts}',
    ],
  },
  presets: [
    presetUno(),
    presetWeapp(),
  ],
  separators: '_',  // 使用单个下划线，避免类名过长
  prefix: 'ucss-',  // 为生成的类名添加前缀，避免类名冲突
})

其他问题目前还没有遇见，遇见了第一时间给大家分享，希望大家多多指点...

一步步配置 UnoCSS 与 Vite，让你的项目更高效、微信小程序中如何使用UnoCSS和问题解决