feat: integrate antd

configs/vite.renderer.ts

@@ -1,18 +1,35 @@
 import { join } from 'path'
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import styleImport from 'vite-plugin-style-import'
 import pkg from '../package.json'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   root: join(__dirname, '../src/renderer'),
-  plugins: [react()],
+  plugins: [
+    react(),
+    styleImport({
+      libs: [{
+        libraryName: 'antd',
+        esModule: true,
+        resolveStyle: (name) => `antd/es/${name}/style/index`,
+      },],
+    }),
+  ],
   base: './',
   build: {
     emptyOutDir: true,
     minify: false,
     outDir: '../../dist/renderer',
   },
+  css: {
+    preprocessorOptions: {
+      less: {
+        javascriptEnabled: true,
+      },
+    },
+  },
   server: {
     host: pkg.env.HOST,
     port: pkg.env.PORT,

package.json

@@ -13,6 +13,7 @@
     "node": ">=14.17.0"
   },
   "dependencies": {
+    "antd": "^4.16.13",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
@@ -23,8 +24,10 @@
     "electron": "^15.3.0",
     "electron-builder": "^22.13.1",
     "electron-store": "^8.0.1",
+    "less": "^4.1.2",
     "typescript": "^4.4.4",
-    "vite": "^2.6.13"
+    "vite": "^2.6.13",
+    "vite-plugin-style-import": "^1.3.0"
   },
   "env": {
     "//": "Used in build scripts",

src/renderer/src/App.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { Button } from 'antd'
 import vite from './assets/vite.svg'
 import react from './assets/react.svg'
 import electron from './assets/electron.png'
@@ -23,9 +24,9 @@ function App() {
         </div>
         <p>Hello Electron + Vite + React!</p>
         <p>
-          <button type="button" onClick={() => setCount((count) => count + 1)}>
+          <Button type="primary" onClick={() => setCount((count) => count + 1)}>
             count is: {count}
-          </button>
+          </Button>
         </p>
         <p>
           Edit <code>App.tsx</code> and save to test HMR updates.