UnoCss

介绍

UnoCss

官网UnoCss

官网

安装

pnpm add -D unocss

引入

vite.config.ts

import UnoCSS from 'unocss/vite'
// plugins 中引入
UnoCSS({
  /* options */
}),

创建uno.config.ts

// uno.config.ts
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup,
} from "unocss";

export default defineConfig({
  shortcuts: {
    "flex-center": "flex justify-center items-center",
    "flex-x-center": "flex justify-center",
    "flex-y-center": "flex items-center",
    "wh-full": "w-full h-full",
    "flex-x-between": "flex items-center justify-between",
    "flex-x-end": "flex items-center justify-end",
    "absolute-lt": "absolute left-0 top-0",
    "absolute-rt": "absolute right-0 top-0 ",
    "fixed-lt": "fixed left-0 top-0",
  },
  theme: {
    colors: {
      primary: "var(--el-color-primary)",
      primary_dark: "var(--el-color-primary-light-5)",
    },
  },
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons(),
    presetTypography(),
    presetWebFonts({
      fonts: {
        // ...
      },
    }),
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()],
});

main.ts 中引入

// 引入uno.css
import "uno.css";

验证

<script setup lang="ts">
import { ref } from "vue";
import variables from "@/styles/variables.module.scss";
defineProps<{ msg: string }>();

const count = ref(0);
</script>

<template>
  <div>
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    <hr />
    <el-icon size="16" color="red">
      <Edit />
    </el-icon>
    <hr />
    <svg-icon icon-class="refresh" spin />
    刷新
    <hr />
    <div class="test-css">测试是否引入了颜色</div>
    <hr />
    <div :style="{ 'background-color': variables['bgColor'] }">
      测试全局使用
    </div>
    <hr />
    <button class="bg-blue w-80 h-10 ml-10 m-1">button</button>
  </div>
</template>

<style scoped lang="scss">
.read-the-docs {
  color: #888;
}
.test-css {
  width: 100px;
  height: 100px;
  background-color: $bg-color;
}
</style>

测试结果