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>