共计 535 个字符,预计需要花费 2 分钟才能阅读完成。
unocss
unocss 能够间接在 class 中写原子化 css,但有时候可能我不是很想把很多 css 的款式都堆在 tag 上,导致 tag 的 class 很长,或者 tag 属性过多。
配置
官网提供了插件实现在 style 中写原子化 css,官网文档 #apply
// vite.config.ts
import {defineConfig} from "vite";
import Unocss from "unocss/vite";
import transformerDirective from "@unocss/transformer-directives";
export default defineConfig({
plugins: [vue(),
Unocss({transformers: [transformerDirective()],
})
],
});
@unocss/transformer-directives
插件后容许应用 @apply
指令在 style 中写原子化 css
<template>
<div class="container">container</div>
</template>
<style lang="less">
.container {@apply p-5 bg-pink c-white;}
</style>
成果
正文完