- Fixed scss structure

client/src/assets/scss/_global.scss

@@ -1,7 +1,3 @@
-// Other global files
-@import '_variables';
-@import '_fonts';
-
 // RESETS
 html {
     font-size: $font-size-root;
@@ -9,7 +5,7 @@ html {
     height: 100%;
     -webkit-overflow-scrolling: touch;
     line-height: 1.15;
-    color: $primary--base;
+    color: $primary-base;
     -ms-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
     * {
@@ -42,10 +38,11 @@ hr {
     border-top-color: rgba($black, .25);
 }
 
-// BOOTSTRAP
+// BOOTSTRAP OVERRIDES
 .nav-link {
     cursor: pointer;
 }
+
 .btn {
     margin-right: 5px;
 }
@@ -53,6 +50,10 @@ hr {
 .word-break{ word-wrap: break-word; }
 .cursor-pointer{ cursor: pointer; }
 
+.font-weight-black {
+    font-weight: $heavy;
+}
+
 // LAYOUTS
 .fullpage {
     min-height: calc(100vh - 56px);

client/src/assets/scss/_variables.scss

@@ -1,28 +1,31 @@
-
 //// COLOURS
 // Global colours
 $white: #FFF;
 $black: #000;
-$dull--black: #0D0D0D;
+$dull-black: #0D0D0D;
 
-$primary--base: #2c3e50;
+$primary-base: #2c3e50;
-$primary--blue: #599EF4;
+$primary-blue: #599EF4;
-$secondary--blue: #355F91;
+$secondary-blue: #355F91;
 
 $valid: #6AC47B;
 $warning: #F7A758;
 $alert: #F44E4E;
 
-// Spell colours
-$spell-card--innerborder: #f5ebd8;
-
 // FONT FAMILY BASES
-$font-family: 'Lato', sans-serif;
+$font-family: 'Lato', sans-serif !default;
 
-$font-light: 300;
+$light: 300;
-$font-regular: 400;
+$regular: 400;
-$font-bold: 700;
+$bold: 700;
+$heavy: 900;
 
-$font-size-root: 15px !default;
+$font-size-root: 16px !default;
-$font-size-base: 1.2rem !default;
+$font-size-base: 1rem !default;
 $line-height-base: 1.3 !default;
+
+// Breakpoints
+$bp-sm:     576px;
+$bp-md:     768px;
+$bp-lg:     992px;
+$bp-xl:     1200px;

client/src/main.js

@@ -23,7 +23,10 @@ window.$ = jquery
 window.jquery = jquery
 
 // Styles
+// Fonts
+import './assets/scss/_fonts.scss'
 import './assets/scss/_global.scss'
+
 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
 import 'bootstrap/dist/js/bootstrap.js'

client/vue.config.js

@@ -3,9 +3,18 @@ const path = require('path')
 module.exports = {
     configureWebpack: {
         resolve: {
-          alias: {
+            alias: {
             "~": path.resolve(__dirname, 'src/')
-          }
+            }
         }
-      }
+    },
+    css: {
+        loaderOptions: {
+            scss: {
+                prependData: `
+                @import "@/assets/scss/_variables.scss";
+                `
+            }
+        }
+    }
 };