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

unocss

unocss能够间接在class中写原子化css，但有时候可能我不是很想把很多css的款式都堆在tag上，导致tag的class很长，或者tag属性过多。

配置

官网提供了插件实现在style中写原子化css，官网文档 #apply

// vite.config.tsimport { 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>

成果