assets/styles/_colours.scss

@@ -0,0 +1,2 @@
+$primary-colour-light: rgb(127, 127, 127);
+$bg-colour-light: rgb(187, 187, 187);

assets/styles/globals.scss

@@ -0,0 +1,7 @@
+@use 'colours';
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');
+
+body {
+	font-family: 'Ubuntu', sans-serif !important;
+    background-color: colours.$bg-colour-light;
+}

assets/styles/index.scss

@@ -1,3 +1,5 @@
+@use 'colours';
+
 .container {
   min-height: 100vh;
   padding: 0 0.5rem;
@@ -8,15 +10,6 @@
   height: 100vh;
 }
 
-.main {
-  padding: 5rem 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
 .footer {
   width: 100%;
   height: 100px;

nuxt.config.ts

@@ -3,6 +3,7 @@ import { defineNuxtConfig } from 'nuxt';
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
 	css: [
-		'@/styles/globals.css'
+		'@/assets/styles/globals.scss',
+		'@/assets/styles/index.scss',
 	]
 });

package.json

@@ -9,7 +9,9 @@
   "devDependencies": {
     "@nuxt/postcss8": "^1.1.3",
     "@nuxt/types": "^2.15.8",
-    "nuxt": "3.0.0-rc.1"
+    "nuxt": "3.0.0-rc.1",
+    "sass": "^1.52.1",
+    "sass-loader": "^13.0.0"
   },
   "dependencies": {
     "@nuxtjs/i18n": "^7.2.2",

pages/index.vue

@@ -1,3 +1,5 @@
 <template>
-    <h1>Vanner Basta</h1>
-</template>
+	<div class="container">
+		<h1>Vanner Basta</h1>
+	</div>
+</template>

styles/globals.css

@@ -1,5 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');
-
-body {
-    font-family: 'Ubuntu', sans-serif !important;
-}

yarn.lock

@@ -2044,7 +2044,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:^3.5.1, chokidar@npm:^3.5.3":
+"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.5.1, chokidar@npm:^3.5.3":
   version: 3.5.3
   resolution: "chokidar@npm:3.5.3"
   dependencies:
@@ -3924,6 +3924,13 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
+"immutable@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "immutable@npm:4.0.0"
+  checksum: 4b5e9181e4d5fa06728a481835ec09c86367e5d03268666c95b522b7644ab891098022e4479a43c4c81a68f2ed82f10751ce5d33e208d7b873b6e7f9dfaf4d87
+  languageName: node
+  linkType: hard
+
 "import-fresh@npm:^3.2.1":
   version: 3.3.0
   resolution: "import-fresh@npm:3.3.0"
@@ -6623,6 +6630,8 @@ resolve@^1.17.0:
     "@nuxtjs/i18n": ^7.2.2
     autoprefixer: ^10.4.7
     nuxt: 3.0.0-rc.1
+    sass: ^1.52.1
+    sass-loader: ^13.0.0
     tailwindcss: ^3.0.24
   languageName: unknown
   linkType: soft
@@ -6698,6 +6707,44 @@ resolve@^1.17.0:
   languageName: node
   linkType: hard
 
+"sass-loader@npm:^13.0.0":
+  version: 13.0.0
+  resolution: "sass-loader@npm:13.0.0"
+  dependencies:
+    klona: ^2.0.4
+    neo-async: ^2.6.2
+  peerDependencies:
+    fibers: ">= 3.1.0"
+    node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+    sass: ^1.3.0
+    sass-embedded: "*"
+    webpack: ^5.0.0
+  peerDependenciesMeta:
+    fibers:
+      optional: true
+    node-sass:
+      optional: true
+    sass:
+      optional: true
+    sass-embedded:
+      optional: true
+  checksum: f7af03813dccf0405eb02917cd10c97571ab81f42e9ea1f3da6d9e96991e076521809a452ad319d57c1a63273ce07c23ddfdbda5cd071a56d261dc28913afdaa
+  languageName: node
+  linkType: hard
+
+"sass@npm:^1.52.1":
+  version: 1.52.1
+  resolution: "sass@npm:1.52.1"
+  dependencies:
+    chokidar: ">=3.0.0 <4.0.0"
+    immutable: ^4.0.0
+    source-map-js: ">=0.6.2 <2.0.0"
+  bin:
+    sass: sass.js
+  checksum: a0508c88b149641202e8fb589f731e0cb09a15650128dfee6d0d1ee4a868cb57f1e71575535ccd72f54c5313b684a8beb208d293402ca8d32084ee1709d9f26d
+  languageName: node
+  linkType: hard
+
 "sax@npm:^1.2.4":
   version: 1.2.4
   resolution: "sax@npm:1.2.4"
@@ -6931,7 +6978,7 @@ resolve@^1.17.0:
   languageName: node
   linkType: hard
 
-"source-map-js@npm:^1.0.2":
+"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.2":
   version: 1.0.2
   resolution: "source-map-js@npm:1.0.2"
   checksum: c049a7fc4deb9a7e9b481ae3d424cc793cb4845daa690bc5a05d428bf41bf231ced49b4cf0c9e77f9d42fdb3d20d6187619fc586605f5eabe995a316da8d377c