Unocss的使用

Sep 13, 2023

pnpm i unocss

# 重置样式 引入自己自定义的样式也可以
pnpm i @unocss/reset

# 如果需要使用 UnoCSS 的图标预设，还需要安装@iconify/json
pnpm i @iconify/json

集成 UnoCSS

1. 修改 `vite.config.js`,添加 unocss plugin

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import unocss from 'unocss/vite'
// https://vitejs.dev/config/ 
export default defineConfig({
    plugins: [vue(), unocss()]
})

2. 修改 `main.ts` 和 `style.css`

import {createApp} from 'vue'
/** 重置样式 这里引入自定义的重置样式也可 */
import '@unocss/reset/tailwind.css'
/**
 * 项目内的样式，
 * 注意：最好放在重置样式后，uno.css前
 * */
import './style.css'
/** 引入uno.css，不引入不生效 */
import "virtual:uno.css"
import App from './App.vue'
createApp(App).mount('#app')

/* TODO: 不清晰 */
:root {
    --primary-color: #316c72;
    --dark-bg: #18181c;
}
html {
    font-size: 4px;
/ / * 方便unocss计算：1单位 = 0.25 rem = 1 px
}
body {
    font-size: 16px;
}
html,
body,
#app {
    height: 100%;
    margin: 0;
    padding: 0;
}
html.dark {
    background: var(--dark-bg);
}

注意：不管是UnoCSS还是tailwindcss、windicss，默认 4单位 = 1rem，即 1单位 = 1/4rem，而 rem 是相对于html的 font-size 来计算的，一般来说大部分浏览器的html默认 font-size 为 16px，即 1rem = 16px，也就是说 Unocss 的1单位换算成 px 就是 4px，这种方式没什么问题，但对于习惯了使用px计算的人来说，每次都要心算一遍要写多少单位就略显麻烦了。那么有没有办法让 unocss 的1单位=1px了，这样就没有心算成本了，答案是当然有：由公式1单位 = 0.25 * ${html font-size} = 1px可知：将 html 的 font-size 应该为 4px 即可

Presets 预设

Attributify preset

TODO：这个很强大

presetAttributify

例如：presetAttributify 可以在标签上直接写 CSS 样式

<div bg-green-50 un-hover="bg-green-200" un-text-xl text-center/>

Icon（图标）

Icons preset

安装：

pnpm add - D @iconify/json / [你想要的收藏]

// uno.config.ts
import {defineConfig, presetIcons} from 'unocss'
export default defineConfig({
    presets: [
        presetIcons({
            /* options */
        }),
        // ...other presets
    ],
})

安装 @unocss 时会自带 preset-icons，所以安装 @iconify-json 图标就可以了

所有可用图标 -> Icônes

使用：

<span class="i-logos-vue text-3xl"/>
<button class="i-carbon-sun dark:i-carbon-moon"/>
<div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy"/>

还可以自定义图标自定义图标

Rulers （规则）

Rules

export default defineConfig({
    // ...UnoCSS options
    rules: [
        [
            // 多行文本超出部分省略号 line-n
            /^line-(\d+)$/,
            ([, l]) => {
                if (~~l === 1) {
                    return {
                        overflow: "hidden",
                        "text-overflow": "ellipsis",
                        "white-space": "nowrap",
                        width: "100%",
                    }
                }
                return {
                    overflow: "hidden",
                    display: "-webkit-box",
                    "-webkit-box-orient": "vertical",
                    "-webkit-line-clamp": l,
                }
            },
        ],
    ],
})

Shortcuts（快捷方式）

Shortcuts

// 自定义快捷方式
export default defineConfig({
    shortcuts: {
        "bg-main": "bg-green-50",
    }
})

<div class="bg-main"/>

transformer

Directives（指令）

Directives transformer

安装：

pnpm add -D @unocss/transformer-directives

// uno.config.ts
import {defineConfig} from 'unocss'
import transformerDirectives from '@unocss/transformer-directives'
export default defineConfig({
    // ...
    transformers: [
        transformerDirectives(),
    ],
})

使用：

可以使用 @apply、@screen和theme() 指令

.btn {
    @apply rounded px-2 border-none bg-blue-5 text-white;
}

注意：在 scss 文件中使用 @apply 写法，会出现 vscode 无法识别的问题

.btn {
    --at-apply: rounded px-2 border-none bg-blue-5 text-white;
}

可以使用 --at-apply

Variant Group ( 前缀组)

Variant group transformer

解决繁琐的多次写前缀的情况

安装：

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

// uno.config.ts
import {defineConfig} from 'unocss'
import transformerVariantGroup from '@unocss/transformer-variant-group'
export default defineConfig({
    // ...
    transformers: [
        transformerVariantGroup(),
    ],
})

使用：

<div class="hover:bg-gray-400 hover:font-medium font-light font-mono"/> <!-- 简化之后： -->
<div class="hover:(bg-gray-400 font-medium) font-(light mono)"/>

Compile Class（构建合并多个原子类到一个类）

Compile class transformer

# install
pnpm add -D @unocss/transformer-variant-group

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerVariantGroup from '@unocss/transformer-variant-group'
export default defineConfig({
  // ...
  transformers: [
    transformerVariantGroup(),
  ],
})

使用：

<div class=":uno: text-center sm:text-left">
  <div class=":uno: text-sm font-bold hover:text-red"/>
</div>

最终编译的结果：

<div class="uno-qlmcrp">
  <div class="uno-0qw2gr"/>
</div>

Attributify JSX（支持 JSX）

Attributify JSX transformer

Theme

// uno.config.ts
import {defineConfig} from "unocss"
export default defineConfig({
// ...UnoCSS options
    theme: {
        colors: {
            success: "#67C23A",
            warning: "#E6A23C",
            danger: "#F56C6C",
        },
    },
})

注意事项：

使用 Ant Design Vue 时， unocss 的重置样式让，a-button 的默认按钮变透明
- 在 main.ts 中引入 import '@unocss/reset/tailwind-compat.css'
- 而不是 import '@unocss/reset/tailwind.css'
- 即可解决

Back

To Top