From 13d8e7789c1df3ff9c1acc1a315b7b387c72fa7f Mon Sep 17 00:00:00 2001
From: Adrien Agez <adrien.agez@hotmail.fr>
Date: Tue, 28 Jul 2020 14:12:12 +0200
Subject: [PATCH] =?UTF-8?q?=20=F0=9F=94=A8:=20add=20sass=20global=20variab?=
 =?UTF-8?q?les=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 build/utils.js       |  5 +----
 src/App.vue          |  9 ---------
 src/styles/main.sass | 16 ++++++++++++++++
 3 files changed, 17 insertions(+), 13 deletions(-)
 create mode 100644 src/styles/main.sass

diff --git a/build/utils.js b/build/utils.js
index 7f8a086..e15da6f 100644
--- a/build/utils.js
+++ b/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')
   }
 }
 
diff --git a/src/App.vue b/src/App.vue
index 9ab9b3b..03bee6e 100644
--- a/src/App.vue
+++ b/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
 
diff --git a/src/styles/main.sass b/src/styles/main.sass
new file mode 100644
index 0000000..a8c8a4f
--- /dev/null
+++ b/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+ */