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>

效果