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'