项目配置集成unocss指南

项目配置集成 unocss 指南

什么是 UnoCSS？

Unocss 是一个基于 Tailwind CSS的工具，它通过静态分析 HTML 和 CSS 代码，自动消除未使用的样式，以减小生成的 CSS 文件大小。这个工具可以帮助开发者在使用 Tailwind CSS 进行开发时，避免将整个框架的样式都打包到最终的 CSS 文件中，而只保留实际使用到的样式，从而减少文件大小和加载时间。

使用 Unocss 可以让开发者更加高效地使用 Tailwind CSS，避免因为使用了大量未使用的样式而导致 CSS 文件过大的问题。它可以作为构建工具的一部分，用于在开发过程中自动优化样式文件，或者作为单独的工具来处理已有的 CSS 文件。

为什么选择 UnoCSS

按需生成样式: UnoCSS 使用静态分析技术，只生成使用到的 CSS 样式。这意味着您无需手动管理和维护大量的样式文件，而只需编写实际需要的样式代码。这简化了样式管理，减少了样式冗余，并提高了开发效率。
零运行时: UnoCSS 是在构建阶段处理的工具，不需要 JavaScript 运行时。这意味着生成的 CSS 不会增加额外的客户端计算负担，从而提高页面加载速度并改善用户体验。
易于集成和使用: UnoCSS 可以与现有的构建工具（如 webpack、Vite 等）和前端框架（如 Vue、React 等）无缝集成。它提供了插件和配置选项，使您可以轻松地与您的项目集成，并根据您的需求进行自定义。
高性能和快速: UnoCSS 只生成使用到的样式，大大减少了 CSS 文件的大小，从而加快了页面加载速度。它还对样式表进行了优化，使其更紧凑和高效。
开发者友好: UnoCSS 提供了简洁的 API 和一致的类名命名规则，使得样式编写更加直观和易于理解。它还提供了实时预览和自动补全等功能，提升了开发效率。

安装 UnoCSS

可以参考官方网站来安装配置

npm install -D unocss
pnpm add -D unocss
yarn add -D unocss

"devDependencies": {
    "unocss": "^0.58.3"
 }

配置 Vite

// vite.config.ts
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

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

创建 `uno.config.ts` 文件

配置可以参考官网

// 我的uno配置
import type { Theme } from 'unocss/preset-uno'
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  transformerCompileClass,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'
import { entriesToCss, toArray } from '@unocss/core'
import { darkTheme, lightTheme } from './themes'

// https://unocss.nodejs.cn/config/ 配置参考页面
export default defineConfig<Theme>({
  // 生成 CSS 工具的规则。 后来的条目具有更高的优先级。
  rules: [],
  // 自定义简写以提供自动补齐建议。 如果 values 是一个数组，它将与 | 连接并用 () 封装。
  shortcuts: [
    {
      'flex-center': 'flex justify-center items-center',
      'flex-col-center': 'flex flex-col justify-center items-center',
    },
  ],
  // 原始 CSS 注入。
  preflights: [
    {
      getCSS: () => {
        const returnCss: any = []
        // 明亮主题
        const lightCss = entriesToCss(Object.entries(lightTheme))
        const lightRoots = toArray([`*,::before,::after`, `::backdrop`])
        returnCss.push(lightRoots.map((root) => `${root}{${lightCss}}`).join(''))
        // 暗黑主题
        const darkCss = entriesToCss(Object.entries(darkTheme))
        const darkRoots = toArray([
          `html.dark,html.dark *,html.dark ::before,html.dark ::after`,
          `html.dark ::backdrop`,
        ])
        returnCss.push(darkRoots.map((root) => `${root}{${darkCss}}`).join(''))

        return returnCss.join('')
      },
    },
  ],
  theme: {
    colors: {
      'ui-primary': 'rgb(var(--ui-primary))',
      'ui-text': 'rgb(var(--ui-text))',
    },
  },
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      extraProperties: {
        display: 'inline-block',
        'vertical-align': 'middle',
      },
    }),
    presetTypography(),
  ],
  transformers: [transformerDirectives(), transformerVariantGroup(), transformerCompileClass()],
  configDeps: ['themes/index.ts'],
})

将 `virtual:uno.css` 添加到你的主入口中

// main.ts
import 'virtual:uno.css'

运行项目验证

<div class="pa h-full w-full bg-white">
  <div
    class="mx-auto max-w-sm space-y-2 rounded-xl bg-white py-8 px-8 shadow-lg sm:flex sm:items-center sm:space-y-0 sm:space-x-6 sm:py-4"
  >
    <img
      class="mx-auto block h-24 rounded-full sm:mx-0 sm:shrink-0"
      src="/src/assets/images/avatar.gif"
      alt="Woman's Face"
    />
    <div class="space-y-2 text-center sm:text-left">
      <div class="space-y-0.5">
        <p class="text-lg font-semibold text-black">Erin Lindford</p>
        <p class="font-medium text-slate-500">Product Engineer</p>
      </div>
      <button
        class="rounded-full border border-purple-200 px-4 py-1 text-sm font-semibold text-purple-600 hover:border-transparent hover:bg-purple-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
      >
        Message
      </button>
    </div>
  </div>
</div>