如何在uniapp项目中使用UnoCSS1. 什么是 UnoCSS UnoCSS 是一个即时（on-demand）的原子

1. 什么是 UnoCSS

UnoCSS 是一个即时（on-demand）的原子化 CSS 引擎，其设计灵感来源于 Windi CSS 和 Tailwind CSS，但在性能和灵活性上进行了大幅优化。UnoCSS 的核心理念是根据你在模板中的类名，动态生成 CSS，避免了不必要的全局 CSS 加载。

2. 安装 UnoCSS

在项目中引入 UnoCSS，可以通过以下命令安装：
unocss-applet 为了

npm i unocss unocss-applet -D

3. 配置 UnoCSS

安装完成后，需要在项目中进行配置。以下是在 Vue 项目中使用 UnoCSS 的基本配置步骤：

在 vite.config.ts 中配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import UnoCSS from 'unocss/vite';

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

创建 uno.config.ts 配置文件：

在项目的根目录下创建 uno.config.ts 文件，并添加以下内容：

import {
    type Preset,
    type SourceCodeTransformer,
    presetUno,
    defineConfig,
    presetAttributify,
    presetIcons,
    transformerDirectives,
    transformerVariantGroup,
  } from 'unocss'
  
  import {
    presetApplet,
    presetRemRpx,
    transformerApplet,
    transformerAttributify,
  } from 'unocss-applet'
  
  // @see https://unocss.dev/presets/legacy-compat
//   import presetLegacyCompat from '@unocss/preset-legacy-compat'
  
  const isMp = process.env?.UNI_PLATFORM?.startsWith('mp') ?? false
  
  const presets: Preset[] = []
  const transformers: SourceCodeTransformer[] = []
  if (isMp) {
    // 使用小程序预设
    presets.push(presetApplet(), presetRemRpx())
    transformers.push(transformerApplet())
  } else {
    presets.push(
      // 非小程序用官方预设
      presetUno(),
      // 支持css class属性化
      presetAttributify(),
    )
  }
  export default defineConfig({
    presets: [
      ...presets,
      // 支持图标，需要搭配图标库，eg: @iconify-json/carbon, 使用 `<button class="i-carbon-sun dark:i-carbon-moon" />`
      presetIcons({
        scale: 1.2,
        warn: true,
        extraProperties: {
          display: 'inline-block',
          'vertical-align': 'middle',
        },
      }),
      // 将颜色函数 (rgb()和hsl()) 从空格分隔转换为逗号分隔，更好的兼容性app端，example：
      // `rgb(255 0 0)` -> `rgb(255, 0, 0)`
      // `rgba(255 0 0 / 0.5)` -> `rgba(255, 0, 0, 0.5)`
    //   presetLegacyCompat({
    //     commaStyleColorFunction: true,
    //   }) as Preset,
    ],
    /**
     * 自定义快捷语句
     * @see https://github.com/unocss/unocss#shortcuts
     */
    shortcuts: [
      ['center', 'flex justify-center items-center'],
      ['text-primary', 'text-yellow'],
    ],
    transformers: [
      ...transformers,
      // 启用 @apply 功能
      transformerDirectives(),
      // 启用 () 分组功能
      // 支持css class组合，eg: `<div class="hover:(bg-gray-400 font-medium) font-(light mono)">测试 unocss</div>`
      transformerVariantGroup(),
      // Don't change the following order
      transformerAttributify({
        // 解决与第三方框架样式冲突问题
        prefixedOnly: true,
        prefix: 'fg',
      }),
    ],
    rules: [
      [
        'p-safe',
        {
          padding:
            'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)',
        },
      ],
      ['pt-safe', { 'padding-top': 'env(safe-area-inset-top)' }],
      ['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
    ],
  })
  
  /**
   * 最终这一套组合下来会得到：
   * mp 里面：mt-4 => margin-top: 32rpx
   * h5 里面：mt-4 => margin-top: 1rem
   */

4. 在项目中引入 UnoCSS

在 main.ts 或 main.js 文件中引入 UnoCSS：

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

createApp(App).mount('#app');

5. 安装 iconify

在使用 iconify 之前需要安装对应的图标库，安装格式如下：

npm i -D @iconify-json/[the-collection-you-want]

这里选择的是 carbon

执行 npm i -D @iconify-json/carbon 即可。

6. 使用实例

    <div class="content flex"  p="y-2 x-4">
      <view class="i-carbon-user-avatar"/>
      <view class="i-carbon-hexagon-outline text-orange"/>
    </div>

7. 常用文档导航

8. vscode辅助插件

UnoCSS
Iconify IntelliSense

常见问题

如何解决 unocss 不支持 CommonJS 的问题

error: 从 v0.59.x 开始，unocss 不再支持 CommonJS，仅支持 ESM。可以通过动态导入解决：

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

export default async () => {
  const UnoCSS = (await import('unocss/vite')).default;

  return defineConfig({
    plugins: [
      uni(),
      UnoCSS(),
    ],
  });
};