add global-styles.scss and prepend _variables.scss in sassLoader for vue

Author: hadl

src/main.js

@@ -2,6 +2,8 @@ import Vue from 'vue';
 import App from './App.vue';
 import router from './router';
 
+import './scss/global-styles.scss';
+
 Vue.config.productionTip = false;
 
 new Vue({

src/scss/_variables.scss

@@ -0,0 +1 @@
+// this global variables will also be available in every vue file

src/scss/global-styles.scss

@@ -0,0 +1 @@
+@import "variables";

vue.config.js

@@ -4,6 +4,16 @@ const {
 
 // vue.config.js
 module.exports = {
+  css: {
+    loaderOptions: {
+      sass: {
+        prependData: `
+          @import "@/scss/_variables.scss";
+        `,
+      },
+    },
+  },
+
   chainWebpack: (config) => {
     patternlabVuePluginConfig(config);
   }