30-unoCss原子化

最新推荐文章于 2024-03-12 11:47:53 发布

sunnyboysix

最新推荐文章于 2024-03-12 11:47:53 发布

阅读量245

点赞数

分类专栏： vue3官网学习文章标签： vue3

本文链接：https://blog.csdn.net/sunnyboysix/article/details/126787440

版权

vue3官网学习专栏收录该内容

34 篇文章 0 订阅

订阅专栏

npm i -D unocss

 
图标集合安装  https://icones.js.org/
npm i -D @iconify-json/ic

main.ts

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import unoCss from 'unocss/vite'
import { presetIcons, presetAttributify, presetUno } from 'unocss'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    unoCss({
      presets: [presetIcons(), presetAttributify(), presetUno()],
      rules: [
        ['flex', { display: 'flex' }],
        ['globalColor', { color: '#000fff' }],
        [/^m-(\d+)$/,([,d]) => ({ margin: `${ Number(d) * 10 }px` })],
      ],
      shortcuts: {
        cike: ['flex', 'globalColor']
      }
    })
  ]
})

使用