use vite preprocessing instead of svelte-preprocess.

src/routes/+layout.svelte

@@ -1,9 +1,5 @@
 <script>
-	import Header from '$lib/Header.svelte';
 	import '/src/styles/styles.scss';
 </script>
 
 <slot />
-
-<style lang="scss">
-</style>

svelte.config.js

@@ -1,6 +1,4 @@
 import adapter from '@sveltejs/adapter-vercel';
-import preprocess from 'svelte-preprocess';
-import autoprefixer from 'autoprefixer';
 
 const isProduction = process.env.NODE_ENV === 'production' ? true : false;
 
@@ -9,20 +7,6 @@ const config = {
 	kit: {
 		adapter: adapter()
 	},
-	preprocess: [
-		preprocess({
-			sourceMap: !isProduction,
-			scss: {
-				// We can use a path relative to the root because
-				// svelte-preprocess automatically adds it to `includePaths`
-				// if none is defined.
-				prependData: `@import 'src/styles/variables.scss';`
-			},
-			postcss: {
-				plugins: [autoprefixer()]
-			}
-		})
-	],
 	vitePlugin: {
 		experimental: {
 			inspector: {

vite.config.js

@@ -10,9 +10,19 @@ const config = {
 			// these are the aliases and paths to them
 			$utils: path.resolve('./src/lib/utils')
 		}
-	}
+	},
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `
+          @import 'src/styles/variables.scss';
+        `,
+      },
+    },
+  },
 };
 
+// see https://geoffrich.net/posts/svelte-social-image/
 function rawFonts(ext) {
 	return {
 		name: 'vite-plugin-raw-fonts',