1、安装unocss:npm install unocss
2、vite.config.ts中配置:
3、创建unocss自己的ts文件:uno.config.ts 根路径下创建,
4、在创建好的uno.config.ts文件中编写如下代码:
// uno.config.ts import { defineConfig, presetAttributify, presetIcons, presetTypography, presetUno, presetWebFonts, transformerDirectives, transformerVariantGroup, } from "unocss"; export default defineConfig({ rules:[ ['m-1',{margin:'5px',color:'#00ff00'}] ], shortcuts: [ // ... ], theme: { colors: { // ... }, }, presets: [ presetUno(), presetAttributify(), presetIcons(), presetTypography(), presetWebFonts({ fonts: { // ... }, }), ], transformers: [transformerDirectives(), transformerVariantGroup()], });
5、开始使用:使用页面需要在script中导入:import 'uno.css'
vue3.2+vite+unocss原子化配置
最新推荐文章于 2024-06-28 12:04:58 发布
本文介绍了如何在Vite项目中安装并配置unocss,包括在vite.config.ts中添加规则、创建uno.config.ts自定义配置、以及如何在页面中导入和使用unocss的CSS。
摘要由CSDN通过智能技术生成