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()],
})
],
});
【unocs在style模块中使用原子化css】
@unocss/transformer-directives插件后允许使用@apply指令在style中写原子化css
container
.container {
@apply p-5 bg-pink c-white;
}
效果
文章图片
推荐阅读
- 逝去的还在逝去
- 新生活开始（不定期更新）
- 影视天堂精选（第22期）（怀念你，曾在荧幕上闪耀过）
- Nginx报404错误的详细解决方法
- 在CMD窗口中调用python函数的实现
- 如何判断事件是否存在
- 投稿|奇点汽车滑稽剧：生在“蔚小理”，被恒大超车
- 线程池，我是谁（我在哪儿？）
- 别了，韦尔奇（从“中子杰克”到在线教育家，以及他的中国往事）
- Python 超简单一键美化你的文章