Added sass-resources-loader to css webpack rules

app/javascript/styles/_variables.scss

@@ -0,0 +1,31 @@
+// turns navigation links into icon-only buttons
+$nav-breakpoint-1: 850px;
+// search field hidden and replaced with search icon link
+$nav-breakpoint-2: 650px;
+// "Gab" button hidden and replaced with floating button on bottom corner
+$nav-breakpoint-3: 450px;
+// Gab Logo hidden - bare minimum navigation for smallest width devices
+$nav-breakpoint-4: 375px;
+
+$no-gap-breakpoint: 415px;
+
+// Variables for components
+$media-modal-media-max-width: 100%;
+// put margins on top and bottom of image to avoid the screen covered by image.
+$media-modal-media-max-height: 80%;
+
+$z-indexes: (
+  'outdated-browser',
+  'page-wrapper',
+  'site-header',
+  'site-footer'
+  'modal-backdrop',
+  'modal',
+);
+
+// Language codes that uses CJK fonts
+$cjk-langs: ja,
+ko,
+zh-CN,
+zh-HK,
+zh-TW;