Add resolve alias '@' that points to project root.

Move assets file from public to assets in order to let Vite/Rollup handle bundling.

assets/font/open-sans/sass/_variables.scss

@@ -0,0 +1,2 @@
+$OpenSansPath: "@/assets/font/open-sans/fonts" !default;
+$OpenSansVersion: "1.1.0" !default; 

src/components/StatusBar.vue

@@ -152,11 +152,11 @@
                 +dark-mode
                     opacity: 0.9
                 &.dark
-                    background-image: url("icons/dark-mode.png")
+                    background-image: url("@/assets/icons/dark-mode.png")
                 &.light
-                    background-image: url("icons/light-mode.png")
+                    background-image: url("@/assets/icons/light-mode.png")
                 &.system
-                    background-image: url("icons/both-mode.png")
+                    background-image: url("@/assets/icons/both-mode.png")
         
         .format
             padding-top: 0
@@ -170,6 +170,6 @@
                 background-size: 16px
                 background-repeat: no-repeat
                 background-position: center center
-                background-image: url("icons/format.svg")
+                background-image: url("@/assets/icons/format.svg")
 
 </style>

src/components/UpdateStatusItem.vue

@@ -176,14 +176,14 @@
             background-size: 14px
             background-repeat: no-repeat
             background-position: center center
-            background-image: url("icons/update.svg")
+            background-image: url("@/assets/icons/update.svg")
             animation-name: spin
             animation-duration: 2000ms
             animation-iteration-count: infinite
             animation-timing-function: linear
             animation-play-state: paused
             &.icon-download
-                background-image: url("icons/download.svg")
+                background-image: url("@/assets/icons/download.svg")
                 width: 16px
                 height: 16px
                 background-size: 16px

src/css/font.sass

@@ -1,27 +1,27 @@
 @font-face
   font-family: 'Hack'
-  src: url('font/hack/hack-regular.woff2') format('woff2'), url('font/hack/hack-regular.woff') format('woff')
+  src: url('@/assets/font/hack/hack-regular.woff2') format('woff2'), url('@/assets/font/hack/hack-regular.woff') format('woff')
   font-weight: 400
   font-style: normal
 
 
 @font-face
   font-family: 'Hack'
-  src: url('font/hack/hack-bold.woff2') format('woff2'), url('font/hack/hack-bold.woff') format('woff')
+  src: url('@/assets/font/hack/hack-bold.woff2') format('woff2'), url('@/assets/font/hack/hack-bold.woff') format('woff')
   font-weight: 700
   font-style: normal
 
 @font-face 
   font-family: 'Hack'
-  src: url('font/hack/hack-italic.woff2') format('woff2'), url('font/hack/hack-italic.woff') format('woff')
+  src: url('@/assets/font/hack/hack-italic.woff2') format('woff2'), url('@/assets/font/hack/hack-italic.woff') format('woff')
   font-weight: 400
   font-style: italic
 
 @font-face
   font-family: 'Hack'
-  src: url('font/hack/hack-bolditalic.woff2') format('woff2'), url('font/hack/hack-bolditalic.woff') format('woff')
+  src: url('@/assets/font/hack/hack-bolditalic.woff2') format('woff2'), url('@/assets/font/hack/hack-bolditalic.woff') format('woff')
   font-weight: 700
   font-style: italic
 
 
-@import "~/../public/font/open-sans/open-sans"
+@import "@/assets/font/open-sans/open-sans"

vite.config.ts

@@ -6,6 +6,7 @@ import electron from 'vite-plugin-electron'
 import renderer from 'vite-plugin-electron-renderer'
 import license from 'rollup-plugin-license'
 import pkg from './package.json'
+import path from 'path'
 
 rmSync('dist-electron', { recursive: true, force: true })
 
@@ -14,6 +15,12 @@ const isProduction = process.env.NODE_ENV === "production"
 
 // https://vitejs.dev/config/
 export default defineConfig({
+	resolve: {
+        alias: {
+            '@': path.resolve(__dirname),
+        },
+    },
+
 	plugins: [
 		vue(),
 		electron([

webapp/main.js

@@ -4,9 +4,9 @@ import { createApp } from 'vue'
 import App from '../src/components/App.vue'
 import { loadCurrencies } from '../src/currency'
 
-
 const app = createApp(App)
 app.mount('#app')
+//console.log("test:", app.hej.test)
 
 // load math.js currencies
 loadCurrencies()

webapp/vite.config.js

@@ -30,10 +30,12 @@ const middleware = () => {
 // https://vitejs.dev/config/
 export default defineConfig({
     publicDir: "../public",
+
     plugins: [
         vue(), 
         //directoryPlugin({ baseDir: __dirname }),
     ],
+
     css: {
         preprocessorOptions: {
             sass: {
@@ -43,4 +45,10 @@ export default defineConfig({
             },
         },
     },
+
+    resolve: {
+        alias: {
+            '@': path.resolve(__dirname, '..'),
+        },
+    },
 })