【unocss】快速上手

安装与配置

安装依赖

js 复制代码

pnpm add -D unocss

vite 引入 unocss 插件

js 复制代码

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

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

unocss 配置文件

js 复制代码

// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({})

入口文件导入样式

js 复制代码

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

基础使用

默认使用方式兼容 Tailwind CSS 和 Windi CSS
- 使用默认预设的情况下，预设相关内容可看后文
以 Tailwind CSS 为例，若要查询某个规则如何写
可进入对应网站搜索查询

js 复制代码

<div class="block"></div>

配置说明

预设

预设：unocss 中规则的集合

未指定 presets 选项时，会使用默认预设 presetWind3
指定 presets 选项时，默认预设将被忽略，此时若还想使用，需要手动添加默认预设

js 复制代码

// uno.config.ts
import { defineConfig } from 'unocss'
import presetWind3 from '@unocss/preset-wind3'

export default defineConfig({
  presets: [presetWind3()]
})

transformers

转换器：类似于 vite 中的插件，在 unocss 转换为 css 的过程中进行一些操作

js 复制代码

pnpm add -D @unocss/transformer-directives @unocss/transformer-variant-group

js 复制代码

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerDirectives from '@unocss/transformer-directives'
import transformerVariantGroup from '@unocss/transformer-variant-group'

export default defineConfig({
  transformers: [transformerDirectives(), transformerVariantGroup()]
})

@unocss/transformer-directives
通过该转换器可实现在 scss 中使用 unocss，因为 scss 不支持 @apply，所以需要换成 --at-apply 属性语法

js 复制代码

<style lang="scss" scoped>
.btn {
  // @apply text-white bg-blue-500 hover: bg-blue-600 rounded py-2 px-4;
  --at-apply: text-white bg-blue-500 hover: bg-blue-600 rounded py-2 px-4;
}
</style>

@unocss/transformer-variant-group
这个转换器让你能够通过括号分组的方式来使用多个工具类

js 复制代码

<div class="hover:(bg-gray-400 text-white)"></div>
<!-- 等同于 -->
<div class="hover:bg-gray-400 hover:text-white"></div>

shortcuts

快捷方式：对已有 unocss 规则进行组装，快捷生成自定义 unocss 规则

js 复制代码

// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
  shortcuts: {
    'wh-full': 'w-full h-full',
    'flex-h': 'flex flex-row',
    'flex-v': 'flex flex-col',
    'flex-center': 'flex items-center justify-center',
    'flex-h-center': 'flex items-center',
    'flex-v-center': 'flex flex-col items-center'
  },
})

theme

主题变量：在 theme 中定义变量后，这些变量名可以作为后缀与工具类前缀组合使用，来实现对工具类内属性的设置

js 复制代码

// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
  theme: {
    fontSize: {
      'xs': '0.875rem',
    }
  }
})

js 复制代码

<div class="text-xs"><div>

其他内容

变量使用

错误写法，无法生效

js 复制代码

<div :class="`w-${10}px`"></div>

正确写法

js 复制代码

<div 
  class="w-[--side-width]"
  :style="{ '--side-width': `${10}px` }"
></div>

最终配置

js 复制代码

import { defineConfig } from 'unocss'
import presetWind3 from '@unocss/preset-wind3'
import transformerDirectives from '@unocss/transformer-directives'
import transformerVariantGroup from '@unocss/transformer-variant-group'

export default defineConfig({
  presets: [presetWind3()],
  shortcuts: {
    'wh-full': 'w-full h-full',
    'flex-h': 'flex flex-row',
    'flex-v': 'flex flex-col',
    'flex-center': 'flex items-center justify-center',
    'flex-h-center': 'flex items-center',
    'flex-v-center': 'flex flex-col items-center'
  },
  transformers: [transformerDirectives(), transformerVariantGroup()]
})

一些思考

全用原子化框架写样式
- 模板与样式耦合，阅读模板代码时会受到干扰
- F12 查看样式时会有一堆原子化 class，阅读不便
完全不用原子化框架
- 有意义的样式通过 class 实现
- 无意义的样式通过 style 实现
  - style 实现会有过于冗余的问题
  - ex. 绝对定位居中
结论：二者兼容
- 有意义的样式通过 class 实现
- 无意义的样式通过 unocss 实现