如何在uni-app中使用原子化 CSS——UnoCSS

原文地址：原文链接

一、前言

UnoCSS是一个即时的原子化 CSS 引擎，旨在灵活和可扩展。核心是不拘一格的，所有的 CSS 工具类都是通过预设提供的。

那么，UnoCSS 与其他框架的有何不同之处呢？

UnoCSS 由 Windi CSS 团队的成员创建，灵感来源于我们在 Windi CSS 中的工作。虽然 Windi CSS 在 2023 年 3 月停止了维护，但您可以将 UnoCSS 看作是 Windi CSS 的"精神继承者"。

UnoCSS 继承了 Windi 的按需自然样式、属性模式、快捷方式、变体组、编译模式等特性，并在此基础上构建了极具可扩展性和性能的 UnoCSS，从而引入了新的功能，如纯 CSS 图标、无值属性模式、标签化、Web 字体等。

最重要的是，UnoCSS 作为一种原子级 CSS 引擎，所有的功能都是可选的，并且可以轻松创建自己的约定、设计系统和预设 - 您可以选择需要的功能组合 。

Windi CSS 和 UnoCSS 都从Tailwind CSS中汲取了很多灵感。由于 UnoCSS 是从头开始构建的，因此我们可以很好地了解原子 CSS 是如何通过前期的艺术和抽象转化为优雅且强大的 API 的。虽然 Tailwind CSS 和 UnoCSS 有不同的设计目标，因此无法直接进行比较，但我们将列举一些差异:

Tailwind CSS 是一个 PostCSS 插件，而 UnoCSS 是一个具有多种一流构建工具集成的同构引擎（包括PostCSS 插件）。这意味着 UnoCSS 可以在不同的地方更加灵活地使用（例如，CDN 运行时，可以动态生成 CSS），并且可以与构建工具深度集成，提供更好的 HMR、性能和开发者体验（例如，Inspector）。

从技术上讲，抛开权衡不谈，UnoCSS 也被设计成完全可扩展和可定制化，而 Tailwind CSS 则更加偏向于一种观点。在 Tailwind CSS 上构建自定义设计系统（或设计令牌）可能会很困难，你无法真正摆脱 Tailwind CSS 的约定。而在 UnoCSS 上，您可以完全控制地构建几乎任何您想要的东西。例如，我们在一个单一的预设中实现了整个与 Tailwind CSS 兼容的工具，而且还有许多其他有趣哲学的社区预设。

UnoCSS 相较于 Tailwind CSS 的缺点是不支持 Tailwind 的插件系统或配置，这意味着从一个定制化程度很高的 Tailwind CSS 项目迁移可能会更加困难。这是一个有意的决策，旨在使 UnoCSS 高性能和可扩展。

二、安装及使用

2.1 环境
请确保您的node版本≥16。

// package.json
"dependencies": {
    "dayjs": "^1.11.12",
    "pinia": "^2.2.0",
    "pinia-plugin-persist-uni": "^1.3.1",
    "vite": "^5.3.5",
    "wot-design-uni": "^1.3.6"
},
"devDependencies": {
    "@uni-helper/vite-plugin-uni-components": "^0.0.9",
    "@unocss/transformer-directives": "^0.61.6",
    "unocss": "^0.61.6",
    "unocss-preset-weapp": "^0.61.1"
}

2.2 创建uno.config.ts

// uno.config.ts
import presetWeapp from 'unocss-preset-weapp'
import { extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer'
import { presetIcons } from 'unocss'

import transformerDirectives from '@unocss/transformer-directives'

const { presetWeappAttributify, transformerAttributify } = extractorAttributify()

export default {
  presets: [
    // https://github.com/MellowCo/unocss-preset-weapp
    presetWeapp(),
    // attributify autocomplete
    presetWeappAttributify(),
    presetIcons(),
  ],
  shortcuts: [
    {
      'border-base': 'border border-gray-500_10',
      'center': 'flex justify-center items-center',
    },
  ],
  transformers: [
    transformerDirectives({
      enforce: 'pre',
    }),

    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
    transformerAttributify(),

    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
    transformerClass(),
  ],
  theme: {
    color: {
      blue: 'rgba(22, 33, 255, 1)',
      red: '#e74c3c',
      sun: '#f1c40f',
      green: '#16a085',
    },
    border: {
      blue: 'rgba(22, 33, 255, 1)',
      red: '#e74c3c',
      sun: '#f1c40f',
      green: '#16a085',
    },
  },
}

2.3 创建vite.config.ts

// vite.config.ts
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import { resolve } from 'path';
import Components from '@uni-helper/vite-plugin-uni-components'
import { WotResolver } from '@uni-helper/vite-plugin-uni-components/resolvers'

export default defineConfig(async() => {
    const UnoCss = await import('unocss/vite').then(i => i.default)
    return {
        plugins: [
            // make sure put it before `Uni()`
            Components({
                resolvers: [WotResolver()]
            }), 
            uni(),
            UnoCss()
        ],
        resolve: {
            alias: {
              '@': resolve(__dirname, './src'),
              '@components': resolve(__dirname, './src/components/'),
            },
        },
    }
});

注意：

unocss版本为0.58（不含）以后的版本在 vite.config.ts 中要使用如下的引入方式：

const UnoCss = await import('unocss/vite').then(i => i.default)

unocss版本为0.58（含）之前的版本使用如下方式引入：

import UnoCSS from 'unocss/vite';

2.4 main.ts中引入
最后在main.ts引入uno.css。

import 'uno.css';

三、使用

<view class="text-area">
    <text class="title text-32px color-red">Hello，uni-app</text>
</view>