fix: separated ui building for better dev performance

Author: duruer

.gitignore

@@ -28,4 +28,5 @@ build
 functions
 .svelte-kit
 
-.env.local
+.env.local
+/static/style.css

bun.lock

@@ -3,6 +3,8 @@
   "version": "1.0.0",
   "scripts": {
     "dev": "vite dev --host=0.0.0.0 --port=3002",
+    "dev:ui": "sass src/styles/style.scss static/style.css --watch --load-path=. --quiet-deps --no-source-map",
+    "build:ui": "sass src/styles/style.scss static/style.css --load-path=. --quiet-deps --no-source-map",
     "build": "vite build",
     "package": "vite package",
     "preview": "vite preview",
@@ -43,4 +45,4 @@
     "esbuild",
     "svelte-preprocess"
   ]
-}
+}

package.json

@@ -1,11 +1,14 @@
-<style lang="scss" global>
-  @import "src/styles/style";
-</style>
+<svelte:head>
+  {#if dev}
+    <link rel="stylesheet" href="/style.css" />
+  {/if}
+</svelte:head>
 
 <slot />
 
 <script>
-  import { browser } from "$app/environment";
+  import { browser, dev } from "$app/environment";
+  import "@theme-style";
 
   if (browser) {
     import("$lib/init.libs");

src/lib/components/App.svelte

@@ -0,0 +1,2 @@
+// This file is used in dev mode to avoid slow SCSS compilation.
+// The actual styles are loaded via static/style.css which is compiled separately.

src/styles/_empty.scss

@@ -1,5 +1,5 @@
 import { sveltekit } from "@sveltejs/kit/vite";
-import { loadEnv } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import fs from "fs";
 import path from "path";
 
@@ -63,31 +63,40 @@ function copyManifestPlugin(filename = "manifest.json") {
   };
 }
 
-/** @type {import('vite').UserConfig} */
-const config = {
-  plugins: [
-    sveltekit(),
-    copyLangFolderPlugin(),
-    copyManifestPlugin()
-  ],
-  css: {
-    preprocessorOptions: {
-      scss: {
-        api: 'modern-compiler',
-        quietDeps: true,
-        silenceDeprecations: ['mixed-decls', 'color-functions', 'global-builtin', 'import'],
+export default defineConfig(({ command }) => {
+  return {
+    clearScreen: false,
+    plugins: [sveltekit(), copyLangFolderPlugin(), copyManifestPlugin()],
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: "modern-compiler",
+          quietDeps: true,
+          silenceDeprecations: [
+            "mixed-decls",
+            "color-functions",
+            "global-builtin",
+            "import",
+          ],
+        },
       },
     },
-  },
-  server: {
-    proxy: {
-      "/api": env.VITE_API_URL.replace("/api", "")
+    server: {
+      proxy: {
+        "/api": env.VITE_API_URL.replace("/api", ""),
+      },
+      allowedHosts: true,
+      hmr: {
+        path: "/",
+      },
     },
-    allowedHosts: true,
-    hmr: {
-      path: "/",
+    resolve: {
+      alias: {
+        "@theme-style":
+          command === "serve"
+            ? path.resolve(process.cwd(), "src/styles/_empty.scss")
+            : path.resolve(process.cwd(), "src/styles/style.scss"),
+      },
     },
-  }
-};
-
-export default config;
+  };
+});