关于css:unocs在style模块中使用原子化css

68次阅读

共计 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>

成果

正文完
 0