unocs在style模块中使用原子化css
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>
效果
转载自:https://segmentfault.com/a/1190000042192160