Added Sass compiler and correct indenting.

README.md

@@ -1,25 +1,19 @@
-# breach
+# Breach
 
-## Project setup
+A browser game inspired by Breach Protocol from Cyberpunk 2077.
 
-```
+## Run in development mode
-npm install
-```
-
-### Compiles and hot-reloads for development
 
 ```
 npm run serve
 ```
 
-### Compiles and minifies for production
+### Build for production
 
 ```
 npm run build
 ```
 
-### Lints and fixes files
+## License
 
-```
+MIT
-npm run lint
-```

package.json

@@ -20,6 +20,8 @@
     "@vue/eslint-config-typescript": "^5.0.2",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^7.0.0-0",
+    "node-sass": "^5.0.0",
+    "sass-loader": "^10.1.0",
     "typescript": "~3.9.3"
   }
 }

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
+    <img alt="Vue logo" src="./assets/logo.png" />
     <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
 </template>
 
@@ -15,13 +15,6 @@ export default defineComponent({
 });
 </script>
 
-<style>
+<style lang="scss">
-#app {
+    @import "@/sass/main.scss";
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
 </style>

src/components/HelloWorld.vue

@@ -11,7 +11,7 @@
             <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
             <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
         </ul>
-    <h3>Essential Links</h3>
+        <h3>Essential Links!</h3>
         <ul>
             <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
             <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
@@ -34,26 +34,27 @@
 import {defineComponent} from 'vue';
 
 export default defineComponent({
-  name: 'HelloWorld',
     props: {
-    msg: String,
+        msg: String
-  },
+    }
 });
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss">
-<style scoped>
     h3 {
         margin: 40px 0 0;
     }
+
     ul {
         list-style-type: none;
         padding: 0;
     }
+
     li {
         display: inline-block;
         margin: 0 10px;
     }
+
     a {
         color: #42b983;
     }

src/main.ts

@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 
-createApp(App).mount('#app')
+createApp(App)
+    .mount('#app');

src/sass/main.scss

@@ -0,0 +1,3 @@
+body {
+    background: rgb(238, 238, 238);
+}