feat(css): scss support

4 files changed, 52 insertions, 50 deletions

diff --git a/bun.lockb b/bun.lockb
index 5d7d2793..cfa6cff7 100755
--- a/bun.lockb
+++ b/bun.lockb
diff --git a/package.json b/package.json
index 93d1a046..00dfcecd 100644
--- a/package.json
+++ b/package.json
@@ -1,51 +1,53 @@
 {
-	"name": "due.moe",
-	"version": "0.0.0",
-	"private": true,
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/adapter-vercel": "next",
-		"@sveltejs/kit": "^1.20.4",
-		"@types/dom-to-image": "^2.6.5",
-		"@types/fast-levenshtein": "^0.0.4",
-		"@types/file-saver": "^2.0.5",
-		"@types/jsdom": "^21.1.6",
-		"@typescript-eslint/eslint-plugin": "^5.45.0",
-		"@typescript-eslint/parser": "^5.45.0",
-		"eslint": "^8.28.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte": "^2.30.0",
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.10.1",
-		"svelte": "^4.0.5",
-		"svelte-adapter-bun": "^0.5.0",
-		"svelte-check": "^3.4.3",
-		"sveltekit-rate-limiter": "^0.4.2",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^4.4.2"
-	},
-	"type": "module",
-	"dependencies": {
-		"@vercel/postgres": "^0.5.1",
-		"dexie": "^4.0.1-alpha.25",
-		"fast-levenshtein": "^3.0.0",
-		"fetch-jsonp": "^1.3.0",
-		"html2canvas": "^1.4.1",
-		"jsdom": "^23.0.1",
-		"modern-screenshot": "^4.4.33",
-		"rss-parser": "^3.13.0",
-		"socket.io": "^4.7.2",
-		"socket.io-client": "^4.7.2",
-		"wanakana": "^5.3.1"
-	}
+  "name": "due.moe",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "format": "prettier --plugin-search-dir . --write ."
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/adapter-vercel": "next",
+    "@sveltejs/kit": "^1.20.4",
+    "@types/dom-to-image": "^2.6.5",
+    "@types/fast-levenshtein": "^0.0.4",
+    "@types/file-saver": "^2.0.5",
+    "@types/jsdom": "^21.1.6",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte": "^2.30.0",
+    "prettier": "^2.8.0",
+    "prettier-plugin-svelte": "^2.10.1",
+    "svelte": "^4.0.5",
+    "svelte-adapter-bun": "^0.5.0",
+    "svelte-check": "^3.4.3",
+    "sveltekit-rate-limiter": "^0.4.2",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^4.4.2"
+  },
+  "type": "module",
+  "dependencies": {
+    "@vercel/postgres": "^0.5.1",
+    "dexie": "^4.0.1-alpha.25",
+    "fast-levenshtein": "^3.0.0",
+    "fetch-jsonp": "^1.3.0",
+    "html2canvas": "^1.4.1",
+    "jsdom": "^23.0.1",
+    "modern-screenshot": "^4.4.33",
+    "rss-parser": "^3.13.0",
+    "sass": "^1.69.7",
+    "socket.io": "^4.7.2",
+    "socket.io-client": "^4.7.2",
+    "svelte-preprocess": "^5.1.3",
+    "wanakana": "^5.3.1"
+  }
 }
diff --git a/src/lib/Styles/card.css b/src/lib/Styles/card.css
index 6219aa8a..3f6049fa 100644
--- a/src/lib/Styles/card.css
+++ b/src/lib/Styles/card.css
@@ -1,4 +1,4 @@
-@import './details.css';
+@import './details.scss';
 
 details,
 .card {
diff --git a/src/lib/Styles/details.css b/src/lib/Styles/details.scss
index 1f945bdd..1f945bdd 100644
--- a/src/lib/Styles/details.css
+++ b/src/lib/Styles/details.scss