2 files changed, 14 insertions, 3 deletions
diff --git a/packages/renderers/renderer-svelte/index.js b/packages/renderers/renderer-svelte/index.js
index 502ba6bfa..93ecfcdfc 100644
--- a/packages/renderers/renderer-svelte/index.js
+++ b/packages/renderers/renderer-svelte/index.js
@@ -1,10 +1,11 @@
 import { svelte } from '@sveltejs/vite-plugin-svelte';
+import preprocess from 'svelte-preprocess';
 
 export default {
   name: '@astrojs/renderer-svelte',
   client: './client.js',
   server: './server.js',
-  viteConfig() {
+  viteConfig({ mode }) {
     return {
       optimizeDeps: {
         include: ['@astrojs/renderer-svelte/client.js', 'svelte', 'svelte/internal'],
@@ -13,7 +14,16 @@ export default {
       plugins: [
         svelte({
           emitCss: true,
-          compilerOptions: { hydratable: true },
+          compilerOptions: { dev: mode === 'development', hydratable: true },
+          preprocess: [
+            preprocess({
+              less: true,
+              sass: { renderSync: true },
+              scss: { renderSync: true },
+              stylus: true,
+              typescript: true,
+            }),
+          ],
         }),
       ],
     };
diff --git a/packages/renderers/renderer-svelte/package.json b/packages/renderers/renderer-svelte/package.json
index b4e51374b..2b676577c 100644
--- a/packages/renderers/renderer-svelte/package.json
+++ b/packages/renderers/renderer-svelte/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
-    "svelte": "^3.44.1"
+    "svelte": "^3.44.2",
+    "svelte-preprocess": "^4.9.8"
   },
   "engines": {
     "node": "^12.20.0 || ^14.13.1 || >=16.0.0"