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

1、Vite 和 UnoCSS 简介

• Vite：快速的构建工具，支持热更新和快速构建。

• UnoCSS：原子化 CSS 库，按需生成 CSS 类，减少最终生成的样式体积。

2、安装 UnoCSS 到 Vite 项目

安装 UnoCSS 插件：

sql
 体验AI代码助手
 代码解读
复制代码
npm install unocss --save-dev
yarn add unocss --save-dev

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

javascript
 体验AI代码助手
 代码解读
复制代码
import { defineConfig } from ''vite''
import UnoCSS from ''unocss/vite''

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

UnoCSS 配置

新建uno.config.ts文件

javascript
 体验AI代码助手
 代码解读
复制代码
// uno.config.js
import { defineConfig } from ''unocss''
export default defineConfig({

})

main.ts配置

引入 import ''virtual:uno.css''

javascript
 体验AI代码助手
 代码解读
复制代码
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

sql
 体验AI代码助手
 代码解读
复制代码
npm install @unocss/preset-uno --save-dev

配置 @unocss/preset-uno

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

vite.config.ts

javascript
 体验AI代码助手
 代码解读
复制代码
// 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

javascript
 体验AI代码助手
 代码解读
复制代码
// 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

sql
 体验AI代码助手
 代码解读
复制代码
npm install unocss-preset-weapp --save-dev
yarn add unocss-preset-weapp --save-dev

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

javascript
 体验AI代码助手
 代码解读
复制代码
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、单位换算不统一

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

   ini
    体验AI代码助手
    代码解读
   复制代码
   <view class="color-amber w-40rpx p-40rpx">11</view>
   

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

javascript
 体验AI代码助手
 代码解读
复制代码
// 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 可以帮助你生成更加符合小程序要求的简短类名。

javascript
 体验AI代码助手
 代码解读
复制代码
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-'',  // 为生成的类名添加前缀，避免类名冲突
})

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