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'