最近开始实习了，下班后写点小玩具项目练练手，顺便学点新东西，之前用TailwindCSS挺多，这段时间打算学一学另一个原子化CSS引擎——anfu大佬的号称比TailwindCSS更快，功能更强的UnoCSS。文档的的基础配置写的比较齐全，可以直接去看UnoCSS英文官方文档，UnoCSS的原子样式并没有像TailwindCSS那样详细地写在文档里，不过它的原子样式和WindCSS很像，并且官方也提供了交互式文档，可以直接查阅，另外，官方还提供了一个练习场，学习或者写demo测试，可以在练习场进行，很方便。

写下这篇记录时，我使用的UnoCSS版本是: 0.58.2

其实官方文档在配置这块还是写得比较清楚了，基本配置时候就照着官方文档一个一个写就行，注意别手瓢把配置文件名打错了。

目前的简单配置文件模板

uno.config.ts

import {
    defineConfig,
    presetAttributify,
    presetTypography,
    presetIcons,
    presetUno,
    transformerDirectives,
    transformerVariantGroup,
} from 'unocss'

import { IconifyIconCustomisations } from '@iconify/utils'

export default defineConfig({
    content: {
        pipeline: {
            // 将.vue、.ts文件纳入UnoCSS扫描, 这样就可以在其中动态使用原子样式、包括动态icon
            include: [
                /\.(vue|ts)($|\?)/,
            ]
        }
    },
    // 自定义一组样式的缩写
    shortcuts: {
        "wh-full": "w-full h-full",
        "f-col": "flex flex-col",
        'f-row': 'flex flex-row',
    },
    // 配置规则
    rules: [

    ],
    // 设置一些主题, 比如, 你可以在颜色里设置全局通用的颜色并取别名
    theme: {
        colors: {
            // ...
            // 设置color上, 你可以使用各种颜色编码
            success: '#1cdd74',
            // 你也可以使用一系列根元素上定义好的CSS变量
            error: 'rgb(var(--error-color))'
        },
        // 设置断点, 用于移动端适配， 不考虑适配PC，因为这个项目只是移动端，所以只考虑H5和平板
        // 但需要注意的是, 这里的设置会覆盖全局, 如果这里没有设置, 那么可以使用默认的所有断点
        // 如果这里进行了设置, 那么就只能使用这里设置的断点, 例如, 这里没有配置xl，开发中就不可以使用xl断点了
        breakpoints: {
            sm: '640px',
            md: '768px',
            lg: '1024px',
        }
    },
    presets: [
        presetUno(),
        // 令样式可属性化, 不用全部写在class里, 便于组织
        presetAttributify(),
        // 预设图标, 可用图标集npm包需要自己去npm查找
        /**
         * @description 支持使用的图标集
         * @link https://www.npmjs.com/search?q=%40iconify-json
         */
        presetIcons({
            // 自定义图标样式的前缀
            prefix: ['i-'],
            collections: {
                // 使用tabler图标集: https://icones.js.org/collection/tabler
                // 配置集合缩写名为tb
                // 图标使用格式: i-tb-<icon> 或者 i-tb:<icon>
                tabler: () => import('@iconify-json/tabler/icons.json').then(i => i.default)
            },
            extraProperties: {
                'display': "inline-block",
                'vertical-align': 'middle'
            },
            /**
             * @description 图标自定义配置项的类型文档
             * @link https://iconify.design/docs/libraries/utils/icon-customisations.html
             */
            customizations: {
                // 在这里配置图标的全局通用基本样式, 比如统一宽高
                customize(props: Required<IconifyIconCustomisations>) {
                    props.width = '2em';
                    props.height = '2em'
                    return props
                },
                // 对特定的图标自定义
                iconCustomizer(collection, icon, props) {
                    // 判断collect和icon, 然后设置props, 不需要返回值
                }
            }
        }),
        presetTypography(),
    ],
    transformers: [
        // 配置需要的转换器, 比如使用类似TailwindCSS的@apply指令、比如支持jsx/tsx文件等
        transformerDirectives(),
        transformerVariantGroup(),
    ],
})

注意事项

其他的都好说，跟着文档按需配置就行，主要是图标集需要注意，因为官方文档没有给出哪些图标集对应的json包的名字是什么，也没有给出支持的图标集的缩写名是什么，不过既然需要从npm下载，那我们就可以去npm官网找到答案

图标集

动态设置icon

当我们需要动态渲染侧边栏或者tabbar时，免不了动态渲染图标。对于这个需求，比较推荐以下两种方案:

在ts文件顶部使用// @unocss-include将其中的图标集纳入UnoCSS扫描范围，再将其引入main.ts，这样配置的动态图标集就可以正常使用
```
// @unocss-include
// 动态绑定到class上的图标
const iconsList = [
    'i-tabler:brand-google-home',
    'i-tabler:align-box-left-stretch'
]
```

在配置文件中将需要使用动态图标的文件纳入扫描范围, 可以使用正则进行匹配，也可以写需要被扫描的文件的路径

// uno.config.ts
export defineConfig({
    // ...
    content:{
        pipeline:{
            include:[
                "src/views/hello/index.vue",  // 可以直接写指定文件的路径
                /\.(vue|ts)($|\?)/, // 也可以配置正则匹配规则
            ]
        }
    }
})

暂时先这样吧，占坑

UnoCSS基础配置记录

目前的简单配置文件模板

注意事项

图标集

相关资源

动态设置icon