unocss，（原子化css），项目初体验

这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战

unocss 简单介绍

antfu 原文地址: # 重新构想原子化 CSS

原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。

UnoCSS 是一个引擎，而非一款框架，因为它并未提供核心工具类，所有功能可以通过预设和内联配置提供。

unocss 其实就是提供所有你可能需要用到的 CSS 工具。例如，传统方案，你可能会用预处理器（这里选用的是 SCSS）生成如下代码：

// style.scss

@for $i from 1 through 10 {
  .m-#{$i} {
    margin: $i / 4 rem;
  }
}

编译结果为：

.m-1 { margin: 0.25 rem; }
.m-2 { margin: 0.5 rem; }
/* ... */
.m-10 { margin: 2.5 rem; }

或许你为了方便生成了一大堆可使用的class，但是中间或许也有无效使用的产物。即使你只使用了其中一条 CSS 规则，但还是要为其余几条规则的文件体积买单。你的 CSS 文件会随着你的生成规则无上限的增大，以此类推，项目包的体积也会越来越大。但在项目中对使用的角度而言，这完全是不必要的。

例如Tailwind就是这样，Tailwind生成的 CSS 文件会有数 MB 的大小。为了解决这个问题，Tailwind 通过使用 PurgeCSS 来扫描你的大包产物并删除你不需要的规则。这得以使其在生产环境中 CSS 文件缩减为几 KB。然而，请注意，这个清除操作仅在生成构建下有效，而开发环境下仍要使用包含了所有规则巨大的 CSS 文件。这在 Webpack 中表现可能并不明显，但在 Vite 中却有着巨大的影响，毕竟其他内容的加载都非常迅捷。

结合Vite的按需加载的理念，unocss提供所见即所得的使用方式。并且提供插件预设进行增强，我们可以使用自定义规则进行rule校验，增加个人开发的方式。

简单上手

安装

npm i -D unocss@latest

yarn add -D unocss@latest

引用

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Unocss from 'unocss/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue({ script: { refSugar: true } }), Unocss()]
})

preset

import { UnocssPluginOptions } from 'unocss/vite'
import { presetUno, presetAttributify, presetIcons } from 'unocss'

export default (): UnocssPluginOptions => ({
  presets: [presetAttributify(), presetUno(), presetIcons()], // 使用自带的内部预设， 按需引用
  rules: [
    [/^z-(\d+)$/, ([, d]) => ({ 'z-index': d })],
    [
      'p-c',
      {
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: `translate(-50%, -50%)`
      }
    ],
    [
      'f-c',
      {
        display: 'flex',
        'justify-content': 'center',
        'align-items': 'center'
      }
    ]
  ]
})

自定义rule，允许我们使用正则匹配，也可以使用自定义的值。第二项需要返回该使用方式对应的规则。

为了方便测试，下面自定义了一些自定义特殊的规则

项目使用


<div z-10 p-c></div>
<div f-c></div>

生成的结果：

可以看到我们的自定义的规则已经使用成功了。

项目起步使用比较简单。大家可以踊跃尝试。