Add global SASS include for all Vue components

src/components/LanguageSelector.vue

@@ -90,11 +90,7 @@
     </form>
 </template>
 
-<style scoped lang="sass">
-    =dark-mode()
-        @media (prefers-color-scheme: dark)
-            @content
-    
+<style scoped lang="sass">    
     .language-selector
         font-size: 13px
         padding: 10px

src/components/StatusBar.vue

@@ -76,9 +76,6 @@
 </template>
 
 <style scoped lang="sass">
-    =dark-mode()
-        @media (prefers-color-scheme: dark)
-            @content
     .status
         box-sizing: border-box
         height: 22px

src/components/UpdateStatusItem.vue

@@ -152,10 +152,6 @@
 </template>
 
 <style scoped lang="sass">
-    =dark-mode()
-        @media (prefers-color-scheme: dark)
-            @content
-    
     @keyframes spin
         from
             transform: rotate(0deg)

src/components/settings/Settings.vue

@@ -118,10 +118,6 @@
 </template>
 
 <style lang="sass">
-    =dark-mode()
-        @media (prefers-color-scheme: dark)
-            @content
-    
     .settings
         position: fixed
         top: 0

src/css/include.sass

@@ -0,0 +1,3 @@
+=dark-mode()
+    @media (prefers-color-scheme: dark)
+        @content

vite.config.ts

@@ -87,6 +87,15 @@ export default defineConfig({
 		  },
 		})
 	],
+	css: {
+		preprocessorOptions: {
+			sass: {
+				additionalData: `
+    @import "./src/css/include.sass"
+`
+			}
+		}
+	},
 	server: !!process.env.VSCODE_DEBUG ? (() => {
 		const url = new URL(pkg.debug.env.VITE_DEV_SERVER_URL)
 		return {