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>
+	<div class="card">
-		Login:
+		<h2>Login</h2>
-	</div>
 		<form>
 			<input type="text" name="Username" autofocus placeholder="Username">
 			<input type="password" name="Password" placeholder="Password">
 		</form>
+	</div>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+	@import '../assets/_shared.scss';
+	
+</style>