switch to global variable file import for scss

client/src/components/Character.vue

@@ -9,8 +9,6 @@
 </template>
 
 <style lang="scss" scoped>
-@import "../assets/scss/_variables";
-
 .card-body h4,
 .breadcrumb-item.active {
     text-transform: capitalize;

client/src/components/CharacterList.vue

@@ -19,8 +19,6 @@
 </template>
 
 <style lang="scss">
-@import "../assets/scss/_variables";
-
 .btn {
     box-shadow: none;
 

client/src/components/Home.vue

@@ -11,8 +11,6 @@
 </template>
 
 <style lang="scss">
-@import "../assets/scss/_variables";
-
 .card {
     color: $grey-9;
     background-color: $grey-2;

client/src/components/QuoteList.vue

@@ -27,8 +27,6 @@
 </template>
 
 <style lang="scss">
-@import "../assets/scss/_variables";
-
 .quote-list > tr {
     white-space: nowrap;
 

client/src/components/SearchResult.vue

@@ -73,8 +73,6 @@
 </template>
 
 <style lang="scss">
-@import "../assets/scss/_variables";
-
 .expandable-result {
     cursor: pointer;
 }

client/src/components/SearchResults.vue

@@ -12,8 +12,6 @@
     </div>
 </template>
 <style lang="scss">
-@import "../assets/scss/_variables";
-
 .card-footer {
     padding: 0.1em;
     font-size: 0.8em;

client/src/components/SeasonList.vue

@@ -59,8 +59,6 @@
 </template>
 
 <style lang="scss">
-@import "../assets/scss/_variables";
-
 // Make all season cards 'clickable'
 .season-item > .card-body > .card-header {
     cursor: pointer;

client/src/components/Skeleton.vue

@@ -2,8 +2,6 @@
     <div class="skeleton"></div>
 </template>
 <style lang="scss" scoped>
-@import "../assets/scss/_variables";
-
 .skeleton {
     background-color: $grey-4;
     background-image: linear-gradient(90deg, $grey-4, $grey-6, $grey-4);

client/vue.config.js

@@ -1,4 +1,11 @@
 module.exports = {
   outputDir: '../dist/',
   assetsDir: './static',
+  css: {
+    loaderOptions: {
+      sass: {
+        prependData: '@import "@/scss/_variables.scss";'
+      }
+    }
+  }
 };