在vue3+vite下使用unocss

1 在项目中下载unocss及一些相关包

pnpm i unocss
pnpm i @unocss/reset  # 除去按钮的背景色覆盖，以避免与 UI 框架的冲突
pnpm i @iconify/json # 图标
pnpm i @unocss/transformer-directives # 适用于@apply、@screen和theme()指令的UnoCSS转换器
pnpm i @unocss/preset-rem-to-px # 将rem转换为px

2 在main.ts文件同级目录下创建style.css文件

style.css

:root {
  --primary-color: #316c72;
  --dark-bg: #18181c;
}

html {
  font-size: 4px; /** 方便unocss计算：1单位 = 0.25rem = 1px**/
}

body {
  font-size: 16px;
}

html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
}

html.dark {
  background: var(--dark-bg);
}

3 在vite.config.ts同级目录下创建uno.config.ts文件

uno.config.ts

import presetRemToPx from '@unocss/preset-rem-to-px';
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetUno,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss';

export default defineConfig({
  presets: [
    presetUno({ important: '#app' }),
    presetAttributify(),
    presetIcons({ scale: 1.2, warn: true }),
    presetRemToPx({ baseFontSize: 4 }),
  ],
  transformers: [transformerVariantGroup(), transformerDirectives()],
  shortcuts: [
    {
      // 垂直水平居中
      'flex-center': 'flex items-center justify-center',
      // 放在最后
      'flex-end': 'flex items-center justify-end',
      // 垂直居中
      'flex-middle': 'flex items-center',
      // 分开两边
      'flex-between': 'flex items-center justify-between',
      // 竖着居中
      'flex-col-center': 'flex flex-col justify-center',
    },
  ],
  rules: [
    [/^bc-(.+)$/, ([, color]) => ({ 'border-color': `#${color}` })],
    ['card-shadow', { 'box-shadow': '0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017' }],
  ],
  theme: {
    colors: {
      primary: 'var(--primary-color)',
      dark_bg: 'var(--dark-bg)',
    },
  },
});

4 在main.ts下引入包和css文件

在import { createApp } from 'vue';之后！

app.mount('#app');之前！

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

import './style.css';
// eslint-disable-next-line import/no-unresolved
import 'virtual:uno.css';

5 在vite.config.ts下配置unocss

引入文件：

import unocss from 'unocss/vite';

UserConfig下

css里：（如果没有这行代码可能导致简写无法生效）

css: {
      //...
      extract: {
        filename: '[name].[hash:9].css',
      },
}

plugins里：

plugins: [
      // ...
      unocss(),
],