vue3 【提效】使用 CSS 框架 UnoCSS 实用教程

该换种更高效的方式写 CSS 啦，举个例：

<div class="flex">
</div>

相当于

<div class="flex">
</div>
<style>
.flex {
  display: flex;
}
</style>

当然，还有超多强大的功能帮我们提升书写样式的效率，即刻开始吧！

使用流程

1. 安装 UnoCSS

npm i -D unocss

2. 添加到 vite 配置中

vite.config.ts

import UnoCSS from 'unocss/vite'

plugins 中添加

UnoCSS(),

3. main.ts 中导入

import 'virtual:uno.css'

4. 创建配置文件

项目目录下新建文件 uno.config.ts，内容为

import { defineConfig } from 'unocss'

export default defineConfig({
  // UnoCSS 的配置
})

后续使用 unocss 比较高级的功能时会用到。

5. vscode 安装 UnoCSS 扩展

• 方便 UnoCSS 的快捷输入
• 可以便捷查看最终样式

UnoCSS 功能详解

清除浏览器默认样式

src/main.ts 中添加下方代码即可

import '@unocss/reset/tailwind.css'

原子化 CSS

即本文开头演示的，用简单且功能单一的 class 来描述样式。

比如：让文字变成红色，并添加 10px 的外边距

<div class="text-red m-2.5">外边距为10px, 内部文字为红色</div>

vscode 安装了 UnoCSS 扩展后，鼠标悬浮到 class 上，可见 UnoCSS 的最终样式效果。

在 class 中输入空格，会触发输入提示

通过官网可查询样式写法
https://unocss.dev/interactive/

自定义 CSS

官方的样式写法使用不习惯？ 可以自己定义！

uno.config.ts 中添加 rules 即可

import { defineConfig } from 'unocss'

export default defineConfig({
  rules: [
    ['p-10', { padding: '10px' }],
    ['m-10', { margin: '10px' }]
  ]
})

但这样一个个定义太麻烦，快来使用正则表达式批量定义

rules: [[/^p-(\d+)$/, (match) => ({ padding: `${match[1]}px` })]]

从此，p- 后的数字是多少，就是多少 px 的内边距，如

快捷 CSS

比如一个绿色按钮的样式，需要多处使用，可以将其定义为 快捷 CSS

uno.config.ts 中添加 shortcuts 实现：

  shortcuts: {
    'btn-green': 'text-white bg-green-500 hover:bg-green-700'
  },

页面中使用

<button class="btn-green">保存</button>

效果如下

同样支持正则的写法实现批量定义，如

shortcuts: [
  // you could still have object style
  {
    btn: 'py-2 px-4 font-semibold rounded-lg shadow-md',
  },
  // dynamic shortcuts
  [/^btn-(.*)$/, ([, c]) => `bg-${c}-400 text-${c}-100 py-2 px-4 rounded-lg`],
]

使用

  <div class="p-20 flex w-xs justify-around">
    <button class="btn-green">保存</button>
    <button class="btn-red">删除</button>
  </div>

效果

在 CSS 中使用 UnoCSS

需先修改配置文件 uno.config.ts （改动部分，见下方代码中的注释）

import { defineConfig } from 'unocss'
// 导入 transformerDirectives
import { transformerDirectives } from 'unocss'

export default defineConfig({
  // 使用 transformerDirectives
  transformers: [transformerDirectives()]
})

使用方法: 在 --at-apply 中写 UnoCSS 即可。

.box {
  --at-apply: p-20 flex justify-around;
  background-color: green;
}

拓展插件

transformer

支持语法 @apply, @screen 和 theme()

1. 安装

npm install -D @unocss/transformer-directives

2. 配置导入

import { transformerDirectives } from 'unocss'

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

@apply 样式合并

将原子化的样式名，合并为一个自定义的样式类名

.myLabel {
  @apply color-red font-bold;
}

<div class="myLabel" >首页</div>

@screen 媒体查询

@screen sm {
  .grid {
    --uno: grid-cols-3;
  }
}

效果为

@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

theme() 添加主题样式

.btn-blue {
  background-color: theme('colors.blue.500');
}

更多用法详见官网

https://unocss.dev/guide/