Scss innit

package.json

@@ -20,7 +20,10 @@
     "@vue/eslint-config-prettier": "^8.0.0",
     "eslint": "^8.45.0",
     "eslint-plugin-vue": "^9.15.1",
+    "node-sass": "^9.0.0",
     "prettier": "^3.0.0",
+    "sass": "^1.66.0",
+    "sass-loader": "^13.3.2",
     "vite": "^4.4.6"
   }
 }

src/assets/_shared.scss

@@ -0,0 +1 @@
+$red: red;

src/components/Login.vue

@@ -17,13 +17,16 @@ export default {
 </script>
 
 <template>
-	<div>
-		Login:
+	<div class="card">
+		<h2>Login</h2>
+		<form>
+			<input type="text" name="Username" autofocus placeholder="Username">
+			<input type="password" name="Password" placeholder="Password">
+		</form>
 	</div>
-	<form>
-		<input type="text" name="Username" autofocus placeholder="Username">
-		<input type="password" name="Password" placeholder="Password">
-	</form>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+	@import '../assets/_shared.scss';
+	
+</style>