Try to do some intelligent stuff

package.json

@@ -8,4 +8,4 @@
   "devDependencies": {
     "vite": "^5.0.0"
   }
-                          }
+}

resources/css/app.css

@@ -0,0 +1,18 @@
+@source inline('loading-bars loading-infinity loading-circle loading-spinner loading-ring loading-ball')
+
+
+#loading-overlay {
+    display: none;
+    position: fixed;
+    top:0;
+    left:0;
+    width: 100%;
+    height: 100%;
+    min-height: 100vh;
+    background: rgba(45, 45, 65, 0.6);
+    z-index: 100;
+}
+
+#loading-overlay div {
+    margin: auto;
+}

vite.config.js

@@ -3,12 +3,25 @@ import path from 'path'
 
 export default defineConfig({
     build: {
-        outDir: 'public/js/e-ops-pf/starter-kit',
+        outDir: 'public', // we handle subfolders manually
         emptyOutDir: true,
         rollupOptions: {
-            input: 'resources/js/app.js',
+            input: {
+                js: 'resources/js/app.js',
+                css: 'resources/css/app.css',
+            },
             output: {
-                entryFileNames: 'app.js',
+                entryFileNames: (chunkInfo) => {
+                    return chunkInfo.name === 'js'
+                        ? 'js/e-ops-pf/starter-kit/app.js'
+                        : 'css/e-ops-pf/starter-kit/app.js' // css is still treated as a chunk
+                },
+                assetFileNames: (assetInfo) => {
+                    if (assetInfo.name.endsWith('.css')) {
+                        return 'css/e-ops-pf/starter-kit/app.css'
+                    }
+                    return 'assets/[name].[ext]'
+                },
             },
         },
     },