install and config unocss

packages/ui/electron.vite.config.ts

@@ -1,6 +1,9 @@
 import { resolve } from 'path'
 import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
 import vue from '@vitejs/plugin-vue'
+import UnoCSS from 'unocss/vite'
+import { presetUno, presetAttributify, presetIcons } from 'unocss'
+import transformerDirective from "@unocss/transformer-directives";
 
 export default defineConfig({
   main: {
@@ -25,7 +28,11 @@ export default defineConfig({
       }
     },
     plugins: [
-      vue()
-    ]
+      vue(),
+      UnoCSS({
+        presets: [presetUno(), presetAttributify(), presetIcons()],
+        transformers: [transformerDirective()],
+      })
+    ],
   }
 })

packages/ui/package.json

@@ -39,6 +39,9 @@
     "@electron-toolkit/tsconfig": "^1.0.1",
     "@rushstack/eslint-patch": "^1.7.1",
     "@types/node": "^18.19.9",
+    "@unocss/preset-attributify": "^0.58.5",
+    "@unocss/preset-icons": "^0.58.5",
+    "@unocss/preset-uno": "^0.58.5",
     "@vitejs/plugin-vue": "^5.0.3",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
@@ -50,6 +53,7 @@
     "prettier": "^3.2.4",
     "sass": "^1.70.0",
     "typescript": "^5.3.3",
+    "unocss": "^0.58.5",
     "unplugin-auto-import": "^0.17.5",
     "unplugin-vue-components": "^0.26.0",
     "vite": "^5.0.12",

packages/ui/src/renderer/src/main.ts

@@ -5,5 +5,6 @@ import router from './router'
 import 'normalize.css'
 import './style/public.scss'
 import 'element-plus/dist/index.css'
+import 'virtual:uno.css'
 
 createApp(App).use(router).use(ElementPlus).mount('#app')