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

@@ -0,0 +1,32 @@
+<script>
+export default {
+	name: "login",
+	data() {
+		return {
+			
+		}
+	},
+	methods: {
+		
+	},
+	beforeDestroy() {
+
+	},
+}
+
+</script>
+
+<template>
+	<div class="card">
+		<h2>Login</h2>
+		<form>
+			<input type="text" name="Username" autofocus placeholder="Username">
+			<input type="password" name="Password" placeholder="Password">
+		</form>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+	@import '../assets/_shared.scss';
+	
+</style>

src/router/index.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import LoginView from '../views/LoginView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -9,6 +10,11 @@ const router = createRouter({
       name: 'home',
       component: HomeView
     },
+    {
+      path: '/login',
+      name: 'login',
+      component: LoginView
+    },
     // {
     //   path: '/about',
     //   name: 'about',

src/views/LoginView.vue

@@ -0,0 +1,12 @@
+<script setup>
+import Login from '../components/Login.vue';
+</script>
+
+<template>
+	<div id="Home">
+		<Login />
+	</div>
+</template>
+
+<style scoped>
+</style>