🔨: add sass global variables file

build/utils.js

@@ -50,11 +50,8 @@ exports.cssLoaders = function (options) {
   return {
     css: generateLoaders(),
     postcss: generateLoaders(),
-    less: generateLoaders('less'),
-    sass: generateLoaders('sass', { indentedSyntax: true }),
+    sass: generateLoaders('sass', { indentedSyntax: true, data: `@import @/styles/main.sass` }),
     scss: generateLoaders('sass'),
-    stylus: generateLoaders('stylus'),
-    styl: generateLoaders('stylus')
   }
 }
 

src/App.vue

@@ -17,15 +17,6 @@ export default {
 
 
 <style lang="sass">
-  $blizzard-background-color: #0A020F
-  $blizzard-font-color: #66CCFF
-  =blizzard-header-gradient
-    background: #0d39a0 /* Old browsers */
-    background: -moz-linear-gradient(left,  #0d39a0 0%, #2f099b 100%) /* FF3.6-15 */
-    background: -webkit-linear-gradient(left,  #0d39a0 0%,#2f099b 100%) /* Chrome10-25,Safari5.1-6 */
-    background: linear-gradient(to right,  #0d39a0 0%,#2f099b 100%) /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-
-
   body
     margin: 0
 

src/styles/main.sass

@@ -0,0 +1,16 @@
+/**
+ * Only add in this file pure sass code (like variables, functions and mixins) that don't get rendered
+ * Otherwise, this code will be duplicated in each component in the final css file
+ */
+
+// ############
+// ## Colors ##
+// ############
+$blizzard-background-color: #0A020F
+$blizzard-font-color: #66CCFF
+
+=blizzard-header-gradient
+  background: #0d39a0 /* Old browsers */
+  background: -moz-linear-gradient(left,  #0d39a0 0%, #2f099b 100%) /* FF3.6-15 */
+  background: -webkit-linear-gradient(left,  #0d39a0 0%,#2f099b 100%) /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(to right,  #0d39a0 0%,#2f099b 100%) /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */