unocss在vite3中的使用(持续更新...)

准备

unocss官网

安装

pnpm i -D unoCSS @unoCSS/preset-uno @unoCSS/preset-attributify @unoCSS/preset-icons

// 使用图标
pnpm i @iconify/json

使用

在vite.config.ts中引入，unoCSS作为插件在vite中使用

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import UnoCSS from 'unoCSS/vite'
import { presetUno, presetAttributify, presetIcons } from 'unoCSS'

export default defineConfig({
  plugins: [vue(),
  UnoCSS({
    presets: [presetUno(), presetAttributify(), presetIcons()],
  })],
})

在main.tsx中使用

    import 'uno.css';

配置vscode

只是在vite.config.ts 配置unocss，vscode是不提示样式和icon；

• 1. 新建unocss.config.ts，配置unocss；

    import { defineConfig, presetIcons, presetUno, presetAttributify } from 'unocss';
  
      export const theme = {
        colors: {
          primary: 'var(--adm-color-primary)',
          text: 'var(--adm-color-text)',
          sed: 'var(--adm-color-text-secondary)',
          light: 'var(--adm-color-light)',
        },
      };
  
      export const unocssPresets = [presetUno(), presetAttributify(), presetIcons()];
  
      export default defineConfig({
        presets: unocssPresets,
        rules: [
          [/^w-(\d+)$/, ([, d]: any) => ({ width: `${d / 4}rem` })],
          [/^h-(\d+)$/, ([, d]: any) => ({ height: `${d / 4}rem` })],
        ],
        theme: theme,
      });
  
  

  在vite.config.ts

   import uncossConfig from './unocss.config';
   
   UnoCSS(uncossConfig),
  

• 2. vscode安装插件Iconify IntelliSense、WindiCSS IntelliSense、UnoCSS

  • 安装unocss插件,不仅有输入提示，并且还可以鼠标悬浮显示编译后的css样式,但是合并的样式不提示

    

  • 安装WindiCSS IntelliSense,合并样式会提示

    

  • 安装Iconify IntelliSense，提示iconify的icon

    

    • 点击会展开icon名字

      

引入公共样式

在unocss中html自带样式替换

pnpm add @unocss/reset

在 main.tsx中添加

import '@unocss/reset/normalize.css';
import '@unocss/reset/tailwind.css'

记录

• 1. windicss 中没有rounded-t，在unocss.config.ts中添加rules

     rules: [
        [/^w-(\d+)$/, ([, d]: any) => ({ width: `${d / 4}rem` })],
        [/^h-(\d+)$/, ([, d]: any) => ({ height: `${d / 4}rem` })],
        [
          /^rounded-t-(\d+)$/,
          ([, d]: any) => ({
            'border-top-left-radius': `${d / 4}rem`,
            'border-top-right-radius': `${d / 4}rem`,
          }),
        ],
        [
          /^rounded-b-(\d+)$/,
          ([, d]: any) => ({
            'border-bottom-left-radius': `${d / 4}rem`,
            'border-bottom-right-radius': `${d / 4}rem`,
          }),
        ],
      ],
     

• 2. 使用transform,后面是双-

       transform="translate-x--1/2 translate-y--1/2"
     

• 3. 使用伪类

     // class使用
     class="first:mt-0"
        
     // presetAttributify使用
     first="mt-0"
     

• 4. shortcuts 使用

       const shortcuts = {
         "flex-between": 'flex justify-between items-center',
         "flex-center": 'flex justify-center items-center',
         "li-item-white" : 'rounded-1 mt-4 p-4 bg-white'
        };
        
        export default defineConfig({
          theme: theme,
          shortcuts: shortcuts,
        });
        
        // html
         <li  className=' li-item-white' >
     

• 5. react html属性配置

     
     import { AttributifyAttributes } from 'windicss/types/jsx';
     
         declare module 'react' {
           interface HTMLAttributes<T> extends AttributifyAttributes {
             p?: string;
             font?: string;
             shadow?: string;
             text?: string;
             bg?: string;
             border?: string;
             cursor?: string;
             w?: string;
             h?: string;
             flex?: string;
             align?: string;
             justify?: string;
             items?: string;
             opacity?: string;
             animate?: string;
             pos?: string;
             m?: string;
             left?: string;
             transform?: string;
             translate?: string;
             overflow?: string;
             rounded?: string;
             display?: string;
             leading?: string;
             relative?: string;
             first?: string;
             fixed?: string;
             top?: string;
             absolute?: string;
             bottom?: string;
             box?: string;
             z?: string;
             right?: string;
           }
           interface CSSProperties {
             [key: `--${string}`]: string | number;
           }
         }
     
     

例子

github