diff --git a/package.json b/package.json
index 344448ee23..6ff3c18933 100644
--- a/package.json
+++ b/package.json
@@ -122,6 +122,7 @@
     "reflect-metadata": "0.1.12",
     "rxjs": "6.2.2",
     "rxjs-spy": "^7.5.1",
+    "sass-resources-loader": "^2.0.0",
     "sortablejs": "1.7.0",
     "text-mask-core": "5.0.1",
     "ts-loader": "^5.2.1",
diff --git a/src/app/+admin/admin-registries/metadata-registry/metadata-registry.component.scss b/src/app/+admin/admin-registries/metadata-registry/metadata-registry.component.scss
index 8c208ffad5..98d8659570 100644
--- a/src/app/+admin/admin-registries/metadata-registry/metadata-registry.component.scss
+++ b/src/app/+admin/admin-registries/metadata-registry/metadata-registry.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 .selectable-row:hover {
   cursor: pointer;
 }
diff --git a/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.scss b/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.scss
index 8c208ffad5..98d8659570 100644
--- a/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.scss
+++ b/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 .selectable-row:hover {
   cursor: pointer;
 }
diff --git a/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.scss b/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.scss
index 88eb98509a..e69de29bb2 100644
--- a/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.scss
+++ b/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.scss
@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';
\ No newline at end of file
diff --git a/src/app/+admin/admin-sidebar/admin-sidebar.component.scss b/src/app/+admin/admin-sidebar/admin-sidebar.component.scss
index 4d55dda565..36355fcab9 100644
--- a/src/app/+admin/admin-sidebar/admin-sidebar.component.scss
+++ b/src/app/+admin/admin-sidebar/admin-sidebar.component.scss
@@ -1,5 +1,3 @@
-@import '../../../styles/variables.scss';
-@import '../../../styles/mixins.scss';
 $icon-z-index: 10;
 
 :host {
diff --git a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
index 779cba09d9..37fe15bd40 100644
--- a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
+++ b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 ::ng-deep {
     .fa-chevron-right {
         padding-left: $spacer/2;
diff --git a/src/app/+collection-page/collection-page.component.scss b/src/app/+collection-page/collection-page.component.scss
index da97dd7a62..e69de29bb2 100644
--- a/src/app/+collection-page/collection-page.component.scss
+++ b/src/app/+collection-page/collection-page.component.scss
@@ -1 +0,0 @@
-@import '../../styles/variables.scss';
diff --git a/src/app/+community-page/community-page.component.scss b/src/app/+community-page/community-page.component.scss
index da97dd7a62..e69de29bb2 100644
--- a/src/app/+community-page/community-page.component.scss
+++ b/src/app/+community-page/community-page.component.scss
@@ -1 +0,0 @@
-@import '../../styles/variables.scss';
diff --git a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.scss b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.scss
index 50be6f5ad0..e69de29bb2 100644
--- a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.scss
+++ b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.scss
@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';
diff --git a/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.scss b/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.scss
index 50be6f5ad0..e69de29bb2 100644
--- a/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.scss
+++ b/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.scss
@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';
diff --git a/src/app/+home-page/home-news/home-news.component.default.scss b/src/app/+home-page/home-news/home-news.component.default.scss
deleted file mode 100644
index 3a0cbc7817..0000000000
--- a/src/app/+home-page/home-news/home-news.component.default.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@import '../../../styles/variables.scss';
-
-:host {
-  display: block;
-  margin-top: -$content-spacing;
-  margin-bottom: -$content-spacing;
-}
-
-.display-3 {
-  word-break: break-word;
-}
-
-.dspace-logo {
-  height: 110px;
-  width: 110px;
-}
diff --git a/src/app/+home-page/home-news/home-news.component.scss b/src/app/+home-page/home-news/home-news.component.scss
index 1e1b201253..50d3619ad1 100644
--- a/src/app/+home-page/home-news/home-news.component.scss
+++ b/src/app/+home-page/home-news/home-news.component.scss
@@ -1,2 +1,14 @@
-@import './home-news.component.default';
-@import './themes/*.scss';
\ No newline at end of file
+:host {
+    display: block;
+    margin-top: -$content-spacing;
+    margin-bottom: -$content-spacing;
+}
+
+.display-3 {
+    word-break: break-word;
+}
+
+.dspace-logo {
+    height: 110px;
+    width: 110px;
+}
\ No newline at end of file
diff --git a/src/app/+home-page/home-news/home-news.component.ts b/src/app/+home-page/home-news/home-news.component.ts
index 98279ad553..c065fc8db7 100644
--- a/src/app/+home-page/home-news/home-news.component.ts
+++ b/src/app/+home-page/home-news/home-news.component.ts
@@ -2,8 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ds-home-news',
-  styleUrls: ['./home-news.component.scss'],
-  // templateUrl: './home-news.component.html',
+  styleUrls: ['./$themePath$/home-news.component.$theme$.scss'],
   templateUrl: './$themePath$/home-news.component.$theme$.html'
 })
 
diff --git a/src/app/+home-page/home-news/themes/home-news.component.mantis.scss b/src/app/+home-page/home-news/themes/home-news.component.mantis.scss
index 740c0b29e8..f4fbdf0ea6 100644
--- a/src/app/+home-page/home-news/themes/home-news.component.mantis.scss
+++ b/src/app/+home-page/home-news/themes/home-news.component.mantis.scss
@@ -1,58 +1,4 @@
-@import '../../../../styles/variables.scss';
-
-:host-context(.preview-release) {
-    div.background-image {
-        color: white;
-        background-color: #2e80a3;
-        position: relative;
-        background-position-y: -200px;
-        background-image: url('/assets/images/banner.jpg');
-        background-size: cover;
-        @media screen and (max-width: map-get($grid-breakpoints, lg)) {
-            background-position-y: 0;
-        }
-
-        .container {
-            position: relative;
-            text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
-            &:before, &:after {
-                content: '';
-                display: block;
-                width: $banner-background-gradient-width;
-                height: 100%;
-                top: 0;
-                position: absolute;
-            }
-
-            &:before {
-                background: linear-gradient(to left, $banner-text-background, transparent);
-                left: -$banner-background-gradient-width;
-
-            }
-
-            &:after {
-                background: linear-gradient(to right, $banner-text-background, transparent);
-                right: -$banner-background-gradient-width;
-            }
-
-            background-color: $banner-text-background;
-
-            .jumbotron {
-                background-color: transparent;
-            }
-
-        }
-
-
-        small.credits {
-            a {
-                color: inherit;
-            }
-            opacity: 0.3;
-            position: absolute;
-            right: 5px;
-            bottom: 0;
-        }
-
-    }
+@import '../home-news.component.scss';
+.jumbotron {
+    background-color: transparent;
 }
diff --git a/src/app/+home-page/home-page.component.default.scss b/src/app/+home-page/home-page.component.default.scss
index a7ab662130..e69de29bb2 100644
--- a/src/app/+home-page/home-page.component.default.scss
+++ b/src/app/+home-page/home-page.component.default.scss
@@ -1,3 +0,0 @@
-:host {
-    //color: red;
-}
diff --git a/src/app/+home-page/home-page.component.scss b/src/app/+home-page/home-page.component.scss
index 5b08b40277..29a5e65b4c 100644
--- a/src/app/+home-page/home-page.component.scss
+++ b/src/app/+home-page/home-page.component.scss
@@ -1,2 +1,2 @@
-@import './home-page.component.default';
-@import './themes/*.scss';
+:host {
+}
\ No newline at end of file
diff --git a/src/app/+home-page/home-page.component.ts b/src/app/+home-page/home-page.component.ts
index 8c205b4644..e9650df8af 100644
--- a/src/app/+home-page/home-page.component.ts
+++ b/src/app/+home-page/home-page.component.ts
@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ds-home-page',
-  styleUrls: ['./home-page.component.scss'],
+  styleUrls: ['./$themePath$/home-page.component.$theme$.scss'],
   templateUrl: './$themePath$/home-page.component.$theme$.html'
 })
 export class HomePageComponent {
diff --git a/src/app/+home-page/themes/home-page.component.mantis.scss b/src/app/+home-page/themes/home-page.component.mantis.scss
index 33d0e8569a..3511be1415 100644
--- a/src/app/+home-page/themes/home-page.component.mantis.scss
+++ b/src/app/+home-page/themes/home-page.component.mantis.scss
@@ -1,52 +1,50 @@
-@import '../../../styles/variables.scss';
-
-:host-context(.mantis) {
-    div.background-image {
-        color: white;
-        background-color: $info;
-        position: relative;
-        background-position-y: -200px;
-        background-image: url('/assets/images/banner.jpg');
-        background-size: cover;
-        @media screen and (max-width: map-get($grid-breakpoints, lg)) {
-            background-position-y: 0;
-        }
-
-        .container {
-            position: relative;
-            text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
-            &:before, &:after {
-                content: '';
-                display: block;
-                width: $banner-background-gradient-width;
-                height: 100%;
-                top: 0;
-                position: absolute;
-            }
-
-            &:before {
-                background: linear-gradient(to left, $banner-text-background, transparent);
-                left: -$banner-background-gradient-width;
-
-            }
-
-            &:after {
-                background: linear-gradient(to right, $banner-text-background, transparent);
-                right: -$banner-background-gradient-width;
-            }
-            background-color: $banner-text-background;
-        }
-
-
-        small.credits {
-            a {
-                color: inherit;
-            }
-            opacity: 0.3;
-            position: absolute;
-            right: $spacer;
-            bottom: 0;
-        }
-
+div.background-image {
+    color: white;
+    background-color: $info;
+    position: relative;
+    background-position-y: -200px;
+    background-image: url('/assets/images/banner.jpg');
+    background-size: cover;
+    @media screen and (max-width: map-get($grid-breakpoints, lg)) {
+        background-position-y: 0;
     }
-}
\ No newline at end of file
+
+    .container {
+        position: relative;
+        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
+
+        &:before, &:after {
+            content: '';
+            display: block;
+            width: $banner-background-gradient-width;
+            height: 100%;
+            top: 0;
+            position: absolute;
+        }
+
+        &:before {
+            background: linear-gradient(to left, $banner-text-background, transparent);
+            left: -$banner-background-gradient-width;
+
+        }
+
+        &:after {
+            background: linear-gradient(to right, $banner-text-background, transparent);
+            right: -$banner-background-gradient-width;
+        }
+
+        background-color: $banner-text-background;
+    }
+
+
+    small.credits {
+        a {
+            color: inherit;
+        }
+
+        opacity: 0.3;
+        position: absolute;
+        right: $spacer;
+        bottom: 0;
+    }
+}
diff --git a/src/app/+item-page/edit-item-page/edit-item-page.component.scss b/src/app/+item-page/edit-item-page/edit-item-page.component.scss
index f22ca8f8de..bb3bdaaeb0 100644
--- a/src/app/+item-page/edit-item-page/edit-item-page.component.scss
+++ b/src/app/+item-page/edit-item-page/edit-item-page.component.scss
@@ -1,5 +1,3 @@
-@import '../../../styles/variables.scss';
-
 .btn {
     min-width: $edit-item-button-min-width;
 }
diff --git a/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss b/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss
index 88eb98509a..e69de29bb2 100644
--- a/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss
+++ b/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss
@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';
\ No newline at end of file
diff --git a/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.scss b/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.scss
index 14782326f6..1790157fa5 100644
--- a/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.scss
+++ b/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.scss
@@ -1,4 +1,3 @@
-@import '../../../../../styles/variables.scss';
 .btn[disabled] {
     color: $gray-600;
     border-color: $gray-600;
diff --git a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.scss b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.scss
index f3075702e6..a74ecb8f47 100644
--- a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.scss
+++ b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 .button-row {
     .btn {
         margin-right: 0.5 * $spacer;
diff --git a/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.scss b/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.scss
index dff97a6eb2..75dfd09d0d 100644
--- a/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.scss
+++ b/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 :host {
   .simple-view-element {
     margin-bottom: 15px;
diff --git a/src/app/+item-page/field-components/metadata-uri-values/metadata-uri-values.component.scss b/src/app/+item-page/field-components/metadata-uri-values/metadata-uri-values.component.scss
index 96ce861942..e69de29bb2 100644
--- a/src/app/+item-page/field-components/metadata-uri-values/metadata-uri-values.component.scss
+++ b/src/app/+item-page/field-components/metadata-uri-values/metadata-uri-values.component.scss
@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';
diff --git a/src/app/+item-page/field-components/metadata-values/metadata-values.component.scss b/src/app/+item-page/field-components/metadata-values/metadata-values.component.scss
index 96ce861942..e69de29bb2 100644
--- a/src/app/+item-page/field-components/metadata-values/metadata-values.component.scss
+++ b/src/app/+item-page/field-components/metadata-values/metadata-values.component.scss
@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';
diff --git a/src/app/+item-page/full/field-components/file-section/full-file-section.component.scss b/src/app/+item-page/full/field-components/file-section/full-file-section.component.scss
index 77db5d97cf..5bb04cac2f 100644
--- a/src/app/+item-page/full/field-components/file-section/full-file-section.component.scss
+++ b/src/app/+item-page/full/field-components/file-section/full-file-section.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../../styles/variables';
-@import '../../../../../styles/mixins';
 @media screen and (min-width: map-get($grid-breakpoints, md)) {
     dt {
         text-align: right;
diff --git a/src/app/+item-page/full/full-item-page.component.scss b/src/app/+item-page/full/full-item-page.component.scss
index 4fe93bbb7a..458c4992c7 100644
--- a/src/app/+item-page/full/full-item-page.component.scss
+++ b/src/app/+item-page/full/full-item-page.component.scss
@@ -1,5 +1,3 @@
-@import '../../../styles/variables.scss';
-
 :host {
     div.simple-view-link {
         text-align: center;
diff --git a/src/app/+login-page/login-page.component.scss b/src/app/+login-page/login-page.component.scss
index 38adf24671..58e7272e5f 100644
--- a/src/app/+login-page/login-page.component.scss
+++ b/src/app/+login-page/login-page.component.scss
@@ -1,5 +1,3 @@
-@import '../../styles/variables.scss';
-
 .login-logo {
   height: $login-logo-height;
   width: $login-logo-width;
diff --git a/src/app/+search-page/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.scss b/src/app/+search-page/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.scss
index a28db359b5..20f1bf2952 100644
--- a/src/app/+search-page/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.scss
+++ b/src/app/+search-page/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../../styles/variables.scss';
-@import '../../../../../styles/mixins.scss';
 
 .filters {
     .toggle-more-filters a {
diff --git a/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.scss b/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.scss
index 6452f2469b..c5a38f24a7 100644
--- a/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.scss
+++ b/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../../../styles/variables.scss';
-
 a {
     color: $body-color;
     &:hover, &focus {
diff --git a/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.scss b/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.scss
index 7b5448b980..93d85fcba8 100644
--- a/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.scss
+++ b/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../../../styles/variables.scss';
-
 a {
     color: $link-color;
     &:hover {
diff --git a/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.scss b/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.scss
index 6452f2469b..c5a38f24a7 100644
--- a/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.scss
+++ b/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../../../styles/variables.scss';
-
 a {
     color: $body-color;
     &:hover, &focus {
diff --git a/src/app/+search-page/search-filters/search-filter/search-filter.component.default.scss b/src/app/+search-page/search-filters/search-filter/search-filter.component.default.scss
deleted file mode 100644
index 1db5e9a1b2..0000000000
--- a/src/app/+search-page/search-filters/search-filter/search-filter.component.default.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@import '../../../../styles/variables.scss';
-@import '../../../../styles/mixins.scss';
-
-:host .facet-filter {
-  border: 1px solid map-get($theme-colors, light);
-  cursor: pointer;
-  .search-filter-wrapper.closed {
-    overflow: hidden;
-  }
-  .filter-toggle {
-    line-height: $line-height-base;
-  }
-}
diff --git a/src/app/+search-page/search-filters/search-filter/search-filter.component.scss b/src/app/+search-page/search-filters/search-filter/search-filter.component.scss
index 6f85634a33..c94edb01bb 100644
--- a/src/app/+search-page/search-filters/search-filter/search-filter.component.scss
+++ b/src/app/+search-page/search-filters/search-filter/search-filter.component.scss
@@ -1,2 +1,10 @@
-@import './search-filter.component.default';
-@import './themes/*.scss';
\ No newline at end of file
+:host .facet-filter {
+    border: 1px solid map-get($theme-colors, light);
+    cursor: pointer;
+    .search-filter-wrapper.closed {
+        overflow: hidden;
+    }
+    .filter-toggle {
+        line-height: $line-height-base;
+    }
+}
diff --git a/src/app/+search-page/search-filters/search-filter/search-filter.component.ts b/src/app/+search-page/search-filters/search-filter/search-filter.component.ts
index 8571808669..d64999e930 100644
--- a/src/app/+search-page/search-filters/search-filter/search-filter.component.ts
+++ b/src/app/+search-page/search-filters/search-filter/search-filter.component.ts
@@ -13,8 +13,7 @@ import { SEARCH_CONFIG_SERVICE } from '../../../+my-dspace-page/my-dspace-page.c
 
 @Component({
   selector: 'ds-search-filter',
-  styleUrls: ['./search-filter.component.scss'],
-  // templateUrl: './search-filter.component.html',
+  styleUrls: ['./$themePath$/search-filter.component.$theme$.scss'],
   templateUrl: './$themePath$/search-filter.component.$theme$.html',
   animations: [slide],
 })
diff --git a/src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.scss b/src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.scss
index d8bb1ff1b3..489b7bab63 100644
--- a/src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.scss
+++ b/src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.scss
@@ -1,6 +1,3 @@
-@import '../../../../../styles/variables.scss';
-@import '../../../../../styles/mixins.scss';
-
 .filters {
     .toggle-more-filters a {
         color: $link-color;
diff --git a/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.default.scss b/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.default.scss
deleted file mode 100644
index caaef5985e..0000000000
--- a/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.default.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@import '../../../../../styles/variables.scss';
-@import '../../../../../styles/mixins.scss';
-
-
-.filters {
-     .toggle-more-filters a {
-         color: $link-color;
-         text-decoration: underline;
-         cursor: pointer;
-     }
- }
-
-$slider-handle-width: 18px;
-::ng-deep
-{
-    html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
-        right: -$slider-handle-width/2;
-    }
-    .noUi-horizontal .noUi-handle {
-        width: $slider-handle-width;
-        &:before {
-            left: ($slider-handle-width - 2)/2 - 2;
-        }
-        &:after {
-            left: ($slider-handle-width - 2)/2 + 2;
-        }
-        &:focus {
-            outline: none;
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.scss b/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.scss
index d33771557c..9e536626b0 100644
--- a/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.scss
+++ b/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.scss
@@ -1,2 +1,27 @@
-@import './search-range-filter.component.default';
-@import './themes/*.scss';
+.filters {
+    .toggle-more-filters a {
+        color: $link-color;
+        text-decoration: underline;
+        cursor: pointer;
+    }
+}
+
+$slider-handle-width: 18px;
+::ng-deep
+{
+    html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
+        right: -$slider-handle-width/2;
+    }
+    .noUi-horizontal .noUi-handle {
+        width: $slider-handle-width;
+        &:before {
+            left: ($slider-handle-width - 2)/2 - 2;
+        }
+        &:after {
+            left: ($slider-handle-width - 2)/2 + 2;
+        }
+        &:focus {
+            outline: none;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.ts b/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.ts
index 95d7441184..8988e05459 100644
--- a/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.ts
+++ b/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.ts
@@ -41,7 +41,7 @@ const dateFormats = ['YYYY', 'YYYY-MM', 'YYYY-MM-DD'];
  */
 @Component({
   selector: 'ds-search-range-filter',
-  styleUrls: ['./search-range-filter.component.scss'],
+  styleUrls: ['./$themePath$/search-range-filter.component.$theme$.scss'],
   templateUrl: './search-range-filter.component.html',
   animations: [facetLoad]
 })
diff --git a/src/app/+search-page/search-filters/search-filter/search-range-filter/themes/search-range-filter.component.mantis.scss b/src/app/+search-page/search-filters/search-filter/search-range-filter/themes/search-range-filter.component.mantis.scss
index cdd4f17d0c..2caebead41 100644
--- a/src/app/+search-page/search-filters/search-filter/search-range-filter/themes/search-range-filter.component.mantis.scss
+++ b/src/app/+search-page/search-filters/search-filter/search-range-filter/themes/search-range-filter.component.mantis.scss
@@ -1,7 +1,5 @@
-@import '../../../../../../styles/variables.scss';
+@import '../search-range-filter.component';
 
-:host-context(.mantis) {
-    ::ng-deep .noUi-connect {
-        background: $info;
-    }
-}
\ No newline at end of file
+::ng-deep .noUi-connect {
+    background: $info;
+}
diff --git a/src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.scss b/src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.scss
index d8bb1ff1b3..1d062960c7 100644
--- a/src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.scss
+++ b/src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../../styles/variables.scss';
-@import '../../../../../styles/mixins.scss';
 
 .filters {
     .toggle-more-filters a {
diff --git a/src/app/+search-page/search-filters/search-filter/themes/search-filter.component.mantis.scss b/src/app/+search-page/search-filters/search-filter/themes/search-filter.component.mantis.scss
index 48ed227f0d..308c15cb20 100644
--- a/src/app/+search-page/search-filters/search-filter/themes/search-filter.component.mantis.scss
+++ b/src/app/+search-page/search-filters/search-filter/themes/search-filter.component.mantis.scss
@@ -1,7 +1,6 @@
-@import '../../../../../styles/variables.scss';
-@import '../../../../../styles/mixins.scss';
+@import '../search-filter.component';
 
-:host-context(.mantis) .facet-filter {
+.facet-filter {
     background-color: map-get($theme-colors, light);
     border-radius: $border-radius;
 
diff --git a/src/app/+search-page/search-filters/search-filters.component.scss b/src/app/+search-page/search-filters/search-filters.component.scss
index 628c8ed46f..e69de29bb2 100644
--- a/src/app/+search-page/search-filters/search-filters.component.scss
+++ b/src/app/+search-page/search-filters/search-filters.component.scss
@@ -1,2 +0,0 @@
-@import '../../../styles/variables.scss';
-@import '../../../styles/mixins.scss';
\ No newline at end of file
diff --git a/src/app/+search-page/search-page.component.scss b/src/app/+search-page/search-page.component.scss
index 26011dd57e..05abf74f05 100644
--- a/src/app/+search-page/search-page.component.scss
+++ b/src/app/+search-page/search-page.component.scss
@@ -1,5 +1,3 @@
-@import '../../styles/variables.scss';
-@import '../../styles/mixins.scss';
 
 @include media-breakpoint-down(md) {
     .container {
diff --git a/src/app/+search-page/search-settings/search-settings.component.default.scss b/src/app/+search-page/search-settings/search-settings.component.default.scss
deleted file mode 100644
index 0a3824f815..0000000000
--- a/src/app/+search-page/search-settings/search-settings.component.default.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import '../../../styles/variables.scss';
-
-.setting-option {
-  border: 1px solid map-get($theme-colors, light);
-}
diff --git a/src/app/+search-page/search-settings/search-settings.component.scss b/src/app/+search-page/search-settings/search-settings.component.scss
index 1e62b4894f..cd18456888 100644
--- a/src/app/+search-page/search-settings/search-settings.component.scss
+++ b/src/app/+search-page/search-settings/search-settings.component.scss
@@ -1,2 +1,3 @@
-@import './search-settings.component.default';
-@import './themes/*.scss';
\ No newline at end of file
+.setting-option {
+    border: 1px solid map-get($theme-colors, light);
+}
diff --git a/src/app/+search-page/search-settings/search-settings.component.ts b/src/app/+search-page/search-settings/search-settings.component.ts
index bdc427cd3c..a976a0d106 100644
--- a/src/app/+search-page/search-settings/search-settings.component.ts
+++ b/src/app/+search-page/search-settings/search-settings.component.ts
@@ -9,8 +9,7 @@ import { SEARCH_CONFIG_SERVICE } from '../../+my-dspace-page/my-dspace-page.comp
 
 @Component({
   selector: 'ds-search-settings',
-  styleUrls: ['./search-settings.component.scss'],
-  // templateUrl: './search-settings.component.html'
+  styleUrls: ['./$themePath$/search-settings.component.$theme$.scss'],
   templateUrl: './$themePath$/search-settings.component.$theme$.html'
 })
 
diff --git a/src/app/+search-page/search-settings/themes/search-settings.component.mantis.scss b/src/app/+search-page/search-settings/themes/search-settings.component.mantis.scss
index 4c7389b326..f452f15335 100644
--- a/src/app/+search-page/search-settings/themes/search-settings.component.mantis.scss
+++ b/src/app/+search-page/search-settings/themes/search-settings.component.mantis.scss
@@ -1,10 +1,10 @@
-@import '../../../../styles/variables.scss';
+@import '../search-settings.component';
 
-:host-context(.mantis) .setting-option {
-  background-color: map-get($theme-colors, light);
-  border-radius: $border-radius;
-
-  h5 {
-    font-size: 1.1rem
-  }
+.setting-option {
+    background-color: map-get($theme-colors, light);
+    border-radius: $border-radius;
+    h5 {
+        font-size: 1.1rem
+    }
 }
+
diff --git a/src/app/+search-page/search-sidebar/search-sidebar.component.scss b/src/app/+search-page/search-sidebar/search-sidebar.component.scss
index 35ce5eebce..38e742bca4 100644
--- a/src/app/+search-page/search-sidebar/search-sidebar.component.scss
+++ b/src/app/+search-page/search-sidebar/search-sidebar.component.scss
@@ -1,6 +1,3 @@
-@import '../../../styles/variables.scss';
-@import '../../../styles/mixins.scss';
-
 :host {
     .results {
         line-height: $button-height;
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index a6221b809e..7793b7529c 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,4 +1,3 @@
-@import '../styles/variables.scss';
 @import '../styles/helpers/font_awesome_imports.scss';
 @import '../../node_modules/bootstrap/scss/bootstrap.scss';
 @import '../../node_modules/nouislider/distribute/nouislider.min';
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 072ba20206..6be14c0513 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -24,14 +24,12 @@ import { isAuthenticated } from './core/auth/selectors';
 import { AuthService } from './core/auth/auth.service';
 import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
 import { RouteService } from './shared/services/route.service';
-import global from '../styles/_variables.scss';
 import variables from '../styles/_exposed_variables.scss';
 import { CSSVariableService } from './shared/sass-helper/sass-helper.service';
 import { MenuService } from './shared/menu/menu.service';
 import { MenuID } from './shared/menu/initial-menus-state';
-import { Observable } from 'rxjs/internal/Observable';
+import { combineLatest as combineLatestObservable, Observable, of } from 'rxjs';
 import { slideSidebarPadding } from './shared/animations/slide';
-import { combineLatest as combineLatestObservable, of } from 'rxjs';
 import { HostWindowService } from './shared/host-window.service';
 import { Theme } from '../config/theme.inferface';
 
@@ -65,7 +63,6 @@ export class AppComponent implements OnInit, AfterViewInit {
     private menuService: MenuService,
     private windowService: HostWindowService,
   ) {
-    console.log(global);
     // Load all the languages that are defined as active from the config file
     translate.addLangs(config.languages.filter((LangConfig) => LangConfig.active === true).map((a) => a.code));
 
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
index bd141706da..51201774d5 100644
--- a/src/app/footer/footer.component.scss
+++ b/src/app/footer/footer.component.scss
@@ -1,4 +1,3 @@
-@import '../../styles/variables.scss';
 $footer-bg: $gray-100;
 $footer-border: 1px solid darken($footer-bg, 10%);
 $footer-padding: $spacer * 1.5;
diff --git a/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
index f514508385..c3eba35b79 100644
--- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
+++ b/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
@@ -1,5 +1,3 @@
-@import '../../styles/variables.scss';
-
 @media screen and (max-width: map-get($grid-breakpoints, md)) {
     :host.open {
         background-color: $white;
diff --git a/src/app/header/header.component.default.scss b/src/app/header/header.component.default.scss
deleted file mode 100644
index df4c0b8fb8..0000000000
--- a/src/app/header/header.component.default.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@import '../../styles/variables.scss';
-
-.navbar-brand img {
-    height: $header-logo-height;
-    @media screen and (max-width: map-get($grid-breakpoints, sm)) {
-        height: $header-logo-height-xs;
-    }
-}
-.navbar-toggler .navbar-toggler-icon {
-    background-image: none !important;
-    line-height: 1.5;
-}
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 0eb5297e0d..4d25bd0d43 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -1,2 +1,10 @@
-@import './header.component.default';
-@import './themes/*.scss';
\ No newline at end of file
+.navbar-brand img {
+    height: $header-logo-height;
+    @media screen and (max-width: map-get($grid-breakpoints, sm)) {
+        height: $header-logo-height-xs;
+    }
+}
+.navbar-toggler .navbar-toggler-icon {
+    background-image: none !important;
+    line-height: 1.5;
+}
diff --git a/src/app/header/themes/header.component.mantis.scss b/src/app/header/themes/header.component.mantis.scss
deleted file mode 100644
index ad2eb79870..0000000000
--- a/src/app/header/themes/header.component.mantis.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import '../../../styles/variables.scss';
-
-:host-context(.mantis) {
-    ::ng-deep a {
-        //color: $dark;
-    }
-}
\ No newline at end of file
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
index 1fb78bef0d..f724c3e751 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
@@ -1,5 +1,3 @@
-@import '../../../styles/variables.scss';
-
 .dropdown-menu {
     overflow: hidden;
     min-width: 100%;
diff --git a/src/app/navbar/navbar.component.default.scss b/src/app/navbar/navbar.component.default.scss
deleted file mode 100644
index 947b785196..0000000000
--- a/src/app/navbar/navbar.component.default.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@import '../../styles/variables.scss';
-
-nav.navbar {
-    border-bottom: 1px $gray-400 solid;
-    align-items: baseline;
-}
-
-/** Mobile menu styling **/
-@media screen and (max-width: map-get($grid-breakpoints, md)) {
-    .navbar {
-        width: 100%;
-        background-color: $white;
-        position: absolute;
-        overflow: hidden;
-        height: 0;
-        &.open {
-            height: 100vh; //doesn't matter because wrapper is sticky
-        }
-    }
-}
-
-@media screen and (min-width: map-get($grid-breakpoints, md)) {
-    .reset-padding-md {
-        margin-left: -$spacer/2;
-        margin-right: -$spacer/2;
-    }
-}
-
-/* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
-.navbar-expand-md.navbar-container {
-    @media screen and (max-width: map-get($grid-breakpoints, md)) {
-        > .container {
-            padding: 0 $spacer;
-        }
-        padding: 0;
-    }
-}
-
-
diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
index ac0ab9b72f..d0fa04991d 100644
--- a/src/app/navbar/navbar.component.scss
+++ b/src/app/navbar/navbar.component.scss
@@ -1,3 +1,35 @@
-@import './navbar.component.default';
-@import './themes/*.scss';
+nav.navbar {
+    border-bottom: 1px $gray-400 solid;
+    align-items: baseline;
+}
 
+/** Mobile menu styling **/
+@media screen and (max-width: map-get($grid-breakpoints, md)) {
+    .navbar {
+        width: 100%;
+        background-color: $white;
+        position: absolute;
+        overflow: hidden;
+        height: 0;
+        &.open {
+            height: 100vh; //doesn't matter because wrapper is sticky
+        }
+    }
+}
+
+@media screen and (min-width: map-get($grid-breakpoints, md)) {
+    .reset-padding-md {
+        margin-left: -$spacer/2;
+        margin-right: -$spacer/2;
+    }
+}
+
+/* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
+.navbar-expand-md.navbar-container {
+    @media screen and (max-width: map-get($grid-breakpoints, md)) {
+        > .container {
+            padding: 0 $spacer;
+        }
+        padding: 0;
+    }
+}
\ No newline at end of file
diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts
index 2b6524cea3..103856aa49 100644
--- a/src/app/navbar/navbar.component.ts
+++ b/src/app/navbar/navbar.component.ts
@@ -12,8 +12,7 @@ import { HostWindowService } from '../shared/host-window.service';
  */
 @Component({
   selector: 'ds-navbar',
-  styleUrls: ['navbar.component.scss'],
-  // templateUrl: './navbar.component.html',
+  styleUrls: ['./$themePath$/navbar.component.$theme$.scss'],
   templateUrl: './$themePath$/navbar.component.$theme$.html',
   animations: [slideMobileNav]
 })
diff --git a/src/app/navbar/themes/navbar.component.mantis.scss b/src/app/navbar/themes/navbar.component.mantis.scss
index 9cbf0ccaa0..3f96826659 100644
--- a/src/app/navbar/themes/navbar.component.mantis.scss
+++ b/src/app/navbar/themes/navbar.component.mantis.scss
@@ -1,9 +1,7 @@
-@import '../../../styles/variables.scss';
+@import '../navbar.component.scss';
 
-:host-context(.mantis) {
-    nav.navbar {
-        border-bottom: 5px $green solid;
-    }
+nav.navbar {
+    border-bottom: 5px $green solid;
 }
 
 
diff --git a/src/app/pagenotfound/pagenotfound.component.scss b/src/app/pagenotfound/pagenotfound.component.scss
index da97dd7a62..e69de29bb2 100644
--- a/src/app/pagenotfound/pagenotfound.component.scss
+++ b/src/app/pagenotfound/pagenotfound.component.scss
@@ -1 +0,0 @@
-@import '../../styles/variables.scss';
diff --git a/src/app/shared/chips/chips.component.scss b/src/app/shared/chips/chips.component.scss
index 9d7eae7edd..76be755920 100644
--- a/src/app/shared/chips/chips.component.scss
+++ b/src/app/shared/chips/chips.component.scss
@@ -1,5 +1,3 @@
-@import "../../../styles/variables";
-
 .chip-selected {
   background-color: map-get($theme-colors, info) !important;
 }
diff --git a/src/app/shared/comcol-page-content/comcol-page-content.component.scss b/src/app/shared/comcol-page-content/comcol-page-content.component.scss
index ad84b72f8c..e69de29bb2 100644
--- a/src/app/shared/comcol-page-content/comcol-page-content.component.scss
+++ b/src/app/shared/comcol-page-content/comcol-page-content.component.scss
@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';
\ No newline at end of file
diff --git a/src/app/shared/comcol-page-header/comcol-page-header.component.scss b/src/app/shared/comcol-page-header/comcol-page-header.component.scss
index ad84b72f8c..e69de29bb2 100644
--- a/src/app/shared/comcol-page-header/comcol-page-header.component.scss
+++ b/src/app/shared/comcol-page-header/comcol-page-header.component.scss
@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';
\ No newline at end of file
diff --git a/src/app/shared/comcol-page-logo/comcol-page-logo.component.scss b/src/app/shared/comcol-page-logo/comcol-page-logo.component.scss
index 50be6f5ad0..e69de29bb2 100644
--- a/src/app/shared/comcol-page-logo/comcol-page-logo.component.scss
+++ b/src/app/shared/comcol-page-logo/comcol-page-logo.component.scss
@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss
index 3e6536110d..3af258db79 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss
@@ -1,5 +1,3 @@
-@import "../../../../../../../styles/variables";
-
 .dropdown-toggle::after {
   display:none
 }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.scss
index 7d1160f450..a657d3eeb6 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.scss
@@ -1,5 +1,3 @@
-@import "../../../../../../../styles/variables";
-
 /* style fa-spin */
 .fa-spin {
   pointer-events: none;
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.scss
index 7c58c0272f..fe20afe1ce 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.scss
@@ -1,5 +1,3 @@
-@import "../../../../../../../styles/variables";
-
 :host /deep/ .dropdown-menu {
   width: 100% !important;
   max-height: $dropdown-menu-max-height;
diff --git a/src/app/shared/form/form.component.scss b/src/app/shared/form/form.component.scss
index 1d5e034290..01cf09576f 100644
--- a/src/app/shared/form/form.component.scss
+++ b/src/app/shared/form/form.component.scss
@@ -1,5 +1,3 @@
-@import "../../../styles/_variables.scss";
-
 .ds-form-input-addon {
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
diff --git a/src/app/shared/input-suggestions/input-suggestions.component.scss b/src/app/shared/input-suggestions/input-suggestions.component.scss
index f2587e1b6f..b04cef2adf 100644
--- a/src/app/shared/input-suggestions/input-suggestions.component.scss
+++ b/src/app/shared/input-suggestions/input-suggestions.component.scss
@@ -1,5 +1,3 @@
-@import "../../../styles/_variables.scss";
-
 .autocomplete {
     width: 100%;
     .dropdown-item {
diff --git a/src/app/shared/log-in/log-in.component.scss b/src/app/shared/log-in/log-in.component.scss
index 5e4393edaf..0eda382c0a 100644
--- a/src/app/shared/log-in/log-in.component.scss
+++ b/src/app/shared/log-in/log-in.component.scss
@@ -1,5 +1,3 @@
-@import '../../../styles/variables.scss';
-
 .form-login .form-control:focus {
   z-index: 2;
 }
diff --git a/src/app/shared/notifications/notification/notification.component.scss b/src/app/shared/notifications/notification/notification.component.scss
index 1c8f0ae17c..a5ebb72b0b 100644
--- a/src/app/shared/notifications/notification/notification.component.scss
+++ b/src/app/shared/notifications/notification/notification.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 .alert {
   display: inline-block;
   min-width: $modal-sm;
diff --git a/src/app/shared/notifications/notifications-board/notifications-board.component.scss b/src/app/shared/notifications/notifications-board/notifications-board.component.scss
index 47b1dba0c3..1101393e59 100644
--- a/src/app/shared/notifications/notifications-board/notifications-board.component.scss
+++ b/src/app/shared/notifications/notifications-board/notifications-board.component.scss
@@ -1,6 +1,3 @@
-@import '../../../../styles/variables';
-@import '../../../../styles/mixins';
-
 .notifications-wrapper {
   z-index: $zindex-popover;
   text-align: right;
diff --git a/src/app/shared/object-collection/object-collection.component.scss b/src/app/shared/object-collection/object-collection.component.scss
index 48e6526dff..e69de29bb2 100644
--- a/src/app/shared/object-collection/object-collection.component.scss
+++ b/src/app/shared/object-collection/object-collection.component.scss
@@ -1 +0,0 @@
-@import '../../../styles/variables';
diff --git a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss
index 51a7fc6a55..8b13789179 100644
--- a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss
+++ b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss
@@ -1,2 +1 @@
-@import '../../../../styles/variables';
 
diff --git a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss
index 51a7fc6a55..8b13789179 100644
--- a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss
+++ b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss
@@ -1,2 +1 @@
-@import '../../../../styles/variables';
 
diff --git a/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.scss b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.scss
index 45a533cd01..e69de29bb2 100644
--- a/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.scss
+++ b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.scss
@@ -1 +0,0 @@
-@import '../../../../styles/variables';
diff --git a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss
index 51a7fc6a55..8b13789179 100644
--- a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss
+++ b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss
@@ -1,2 +1 @@
-@import '../../../../styles/variables';
 
diff --git a/src/app/shared/object-grid/object-grid.component.scss b/src/app/shared/object-grid/object-grid.component.scss
index ff78634863..437dfc3b43 100644
--- a/src/app/shared/object-grid/object-grid.component.scss
+++ b/src/app/shared/object-grid/object-grid.component.scss
@@ -1,6 +1,3 @@
-@import '../../../styles/variables';
-@import '../../../styles/mixins';
-
 $ds-wrapper-grid-spacing: $spacer/2;
 
 ds-wrapper-grid-element ::ng-deep {
diff --git a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
index 1d0786105c..e69de29bb2 100644
--- a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
+++ b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
@@ -1 +0,0 @@
-@import '../../../../../styles/variables';
diff --git a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
index bd63aa6a3a..8b13789179 100644
--- a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
+++ b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
@@ -1,2 +1 @@
-@import '../../../../../styles/variables';
 
diff --git a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
index e2751279b6..d61f3ccf55 100644
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../../styles/variables';
-
 .card {
     a > div {
         position: relative;
diff --git a/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss b/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss
index e8d681fb32..dc9f9b3969 100644
--- a/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss
+++ b/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss
@@ -1,4 +1,3 @@
- @import '../../../../styles/variables';
 :host {
     /deep/ em {
         font-weight: bold;
diff --git a/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
index 51a7fc6a55..8b13789179 100644
--- a/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
+++ b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
@@ -1,2 +1 @@
-@import '../../../../styles/variables';
 
diff --git a/src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.scss b/src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.scss
index 45a533cd01..e69de29bb2 100644
--- a/src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.scss
+++ b/src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.scss
@@ -1 +0,0 @@
-@import '../../../../styles/variables';
diff --git a/src/app/shared/object-list/collection-list-element/collection-list-element.component.scss b/src/app/shared/object-list/collection-list-element/collection-list-element.component.scss
index 45a533cd01..e69de29bb2 100644
--- a/src/app/shared/object-list/collection-list-element/collection-list-element.component.scss
+++ b/src/app/shared/object-list/collection-list-element/collection-list-element.component.scss
@@ -1 +0,0 @@
-@import '../../../../styles/variables';
diff --git a/src/app/shared/object-list/community-list-element/community-list-element.component.scss b/src/app/shared/object-list/community-list-element/community-list-element.component.scss
index 45a533cd01..e69de29bb2 100644
--- a/src/app/shared/object-list/community-list-element/community-list-element.component.scss
+++ b/src/app/shared/object-list/community-list-element/community-list-element.component.scss
@@ -1 +0,0 @@
-@import '../../../../styles/variables';
diff --git a/src/app/shared/object-list/item-list-element/item-list-element.component.scss b/src/app/shared/object-list/item-list-element/item-list-element.component.scss
index 45a533cd01..e69de29bb2 100644
--- a/src/app/shared/object-list/item-list-element/item-list-element.component.scss
+++ b/src/app/shared/object-list/item-list-element/item-list-element.component.scss
@@ -1 +0,0 @@
-@import '../../../../styles/variables';
diff --git a/src/app/shared/object-list/object-list.component.scss b/src/app/shared/object-list/object-list.component.scss
index 3d2af4d023..e69de29bb2 100644
--- a/src/app/shared/object-list/object-list.component.scss
+++ b/src/app/shared/object-list/object-list.component.scss
@@ -1 +0,0 @@
-@import '../../../styles/variables';
\ No newline at end of file
diff --git a/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.scss b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.scss
index 1d0786105c..e69de29bb2 100644
--- a/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.scss
+++ b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.scss
@@ -1 +0,0 @@
-@import '../../../../../styles/variables';
diff --git a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.scss b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.scss
index 1d0786105c..e69de29bb2 100644
--- a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.scss
+++ b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.scss
@@ -1 +0,0 @@
-@import '../../../../../styles/variables';
diff --git a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.scss b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.scss
index 1d0786105c..e69de29bb2 100644
--- a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.scss
+++ b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.scss
@@ -1 +0,0 @@
-@import '../../../../../styles/variables';
diff --git a/src/app/shared/object-list/search-result-list-element/search-result-list-element.component.scss b/src/app/shared/object-list/search-result-list-element/search-result-list-element.component.scss
index 7134c43dad..efc4d3c414 100644
--- a/src/app/shared/object-list/search-result-list-element/search-result-list-element.component.scss
+++ b/src/app/shared/object-list/search-result-list-element/search-result-list-element.component.scss
@@ -1,4 +1,3 @@
-@import '../../../../styles/variables';
 :host {
     ::ng-deep em {
         font-weight: bold;
diff --git a/src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.scss b/src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.scss
index 51a7fc6a55..8b13789179 100644
--- a/src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.scss
+++ b/src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.scss
@@ -1,2 +1 @@
-@import '../../../../styles/variables';
 
diff --git a/src/app/shared/search-form/search-form.component.scss b/src/app/shared/search-form/search-form.component.scss
index d5811186e7..64b97aebd8 100644
--- a/src/app/shared/search-form/search-form.component.scss
+++ b/src/app/shared/search-form/search-form.component.scss
@@ -1,5 +1,3 @@
-@import '../../../styles/variables.scss';
-
 // temporary fix for bootstrap 4 beta btn color issue
 .btn-secondary {
   background-color: $input-bg;
diff --git a/src/app/shared/starts-with/date/starts-with-date.component.scss b/src/app/shared/starts-with/date/starts-with-date.component.scss
index ceec56c8c2..64b97aebd8 100644
--- a/src/app/shared/starts-with/date/starts-with-date.component.scss
+++ b/src/app/shared/starts-with/date/starts-with-date.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 // temporary fix for bootstrap 4 beta btn color issue
 .btn-secondary {
   background-color: $input-bg;
diff --git a/src/app/shared/starts-with/text/starts-with-text.component.scss b/src/app/shared/starts-with/text/starts-with-text.component.scss
index ceec56c8c2..64b97aebd8 100644
--- a/src/app/shared/starts-with/text/starts-with-text.component.scss
+++ b/src/app/shared/starts-with/text/starts-with-text.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 // temporary fix for bootstrap 4 beta btn color issue
 .btn-secondary {
   background-color: $input-bg;
diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss
index 133328fec1..68b6772465 100644
--- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss
@@ -1,6 +1,3 @@
-@import '../../../../styles/variables';
-@import '../../../../styles/mixins';
-
 @mixin clamp($lines, $size-factor: 1, $line-height: $line-height-base) {
     $height: $line-height * $font-size-base * $size-factor;
     &.fixedHeight {
diff --git a/src/app/shared/uploader/uploader.component.scss b/src/app/shared/uploader/uploader.component.scss
index 370c3ea280..8835b87b1e 100644
--- a/src/app/shared/uploader/uploader.component.scss
+++ b/src/app/shared/uploader/uploader.component.scss
@@ -1,5 +1,3 @@
-@import '../../../styles/_variables.scss';
-
 .ds-base-drop-zone {
   border: 2px dashed $gray-600;
 }
diff --git a/src/app/shared/view-mode-switch/view-mode-switch.component.scss b/src/app/shared/view-mode-switch/view-mode-switch.component.scss
index ad84b72f8c..e69de29bb2 100644
--- a/src/app/shared/view-mode-switch/view-mode-switch.component.scss
+++ b/src/app/shared/view-mode-switch/view-mode-switch.component.scss
@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';
\ No newline at end of file
diff --git a/src/app/submission/form/collection/submission-form-collection.component.scss b/src/app/submission/form/collection/submission-form-collection.component.scss
index f91f85677d..deecc39510 100644
--- a/src/app/submission/form/collection/submission-form-collection.component.scss
+++ b/src/app/submission/form/collection/submission-form-collection.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../styles/variables';
-
 .scrollable-menu {
   height: auto;
   max-height: $dropdown-menu-max-height;
diff --git a/src/app/submission/form/section-add/submission-form-section-add.component.scss b/src/app/submission/form/section-add/submission-form-section-add.component.scss
index 628f0f5633..c8fd2073d1 100644
--- a/src/app/submission/form/section-add/submission-form-section-add.component.scss
+++ b/src/app/submission/form/section-add/submission-form-section-add.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../styles/variables';
-
 .dropdown-toggle::after {
   display:none
 }
diff --git a/src/app/submission/form/submission-form.component.scss b/src/app/submission/form/submission-form.component.scss
index c9b6872146..44551162cc 100644
--- a/src/app/submission/form/submission-form.component.scss
+++ b/src/app/submission/form/submission-form.component.scss
@@ -1,5 +1,3 @@
-@import '../../../styles/variables';
-
 .submission-form-header {
   background-color: rgba($white, .97);
   padding: ($spacer / 2) 0 ($spacer / 2) 0;
diff --git a/src/app/submission/sections/container/section-container.component.scss b/src/app/submission/sections/container/section-container.component.scss
index 2e17794e42..3917280f8c 100644
--- a/src/app/submission/sections/container/section-container.component.scss
+++ b/src/app/submission/sections/container/section-container.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../styles/variables';
-
 :host /deep/ .card {
   margin-bottom: $submission-sections-margin-bottom;
   overflow: unset;
diff --git a/src/app/submission/sections/upload/file/section-upload-file.component.scss b/src/app/submission/sections/upload/file/section-upload-file.component.scss
index ce67ef98df..7596652dc2 100644
--- a/src/app/submission/sections/upload/file/section-upload-file.component.scss
+++ b/src/app/submission/sections/upload/file/section-upload-file.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../../styles/variables';
-
 .sticky-buttons {
   position: sticky;
   top: $dropdown-item-padding-x * 3;
diff --git a/src/styles/_exposed_variables.scss b/src/styles/_exposed_variables.scss
index 5f0f2d2654..5a3a69fc3c 100644
--- a/src/styles/_exposed_variables.scss
+++ b/src/styles/_exposed_variables.scss
@@ -1,5 +1,3 @@
-@import '_variables.scss';
-
 :export {
     xlMin: map-get($grid-breakpoints, xl);
     mdMin: map-get($grid-breakpoints, md);
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 40bb9b8f3e..e72af304cd 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -1,6 +1,5 @@
 @import '../../node_modules/bootstrap/scss/functions.scss';
 @import '../../node_modules/bootstrap/scss/mixins.scss';
-@import 'variables.scss';
 
 @mixin word-wrap() {
     overflow-wrap: break-word;
@@ -39,5 +38,4 @@
     &::-webkit-resizer {
         background-color: $dark-scrollbar-background;
     }
-
 }
diff --git a/src/styles/_variables_imports.scss b/src/styles/_variables.scss
similarity index 98%
rename from src/styles/_variables_imports.scss
rename to src/styles/_variables.scss
index 47bdc60b74..fd016fd761 100644
--- a/src/styles/_variables_imports.scss
+++ b/src/styles/_variables.scss
@@ -1,7 +1,11 @@
 @import '_functions.scss';
 @import '../../node_modules/bootstrap/scss/functions.scss';
+
 @import '$themePath$/bootstrap_variables.$theme$.scss';
+
 @import 'bootstrap_variables.scss';
 @import '../../node_modules/bootstrap/scss/variables.scss';
+
 @import '$themePath$/custom_variables.$theme$.scss';
+
 @import 'custom_variables.scss';
diff --git a/webpack/webpack.common.js b/webpack/webpack.common.js
index 71312f9bf7..4d8d3b77be 100644
--- a/webpack/webpack.common.js
+++ b/webpack/webpack.common.js
@@ -6,11 +6,12 @@ const {
 } = require('./helpers');
 
 // const theme = '';
-// const themeFolder = '';
 const theme = 'mantis';
-const themeFolder = 'themes';
-
 
+const globalCSSImports = [
+    path.resolve(__dirname, '..', 'src/styles/_variables.scss'),
+    path.resolve(__dirname, '..', 'src/styles/_mixins.scss'),
+];
 const themeReplaceOptions =
         {
             multiple: [
@@ -21,17 +22,17 @@ const themeReplaceOptions =
                 },
                 {
                     search: '$themePath$/',
-                    replace: themeFolder + (themeFolder.length ? '/' : ''),
+                    replace: (theme.length ? 'themes/' : ''),
 
                 },
                 {
                     search: '$theme$.',
-                    replace: theme + (theme.length ? '.' : ''),
+                    replace: (theme.length ? theme + '.' : ''),
 
                 },
                 {
                     search: '$themePath$/',
-                    replace: themeFolder + (themeFolder.length ? '/' : ''),
+                    replace: (theme.length ? 'themes/' : ''),
                 }
             ]
         };
@@ -58,28 +59,6 @@ module.exports = {
                 loader: 'string-replace-loader',
                 options: themeReplaceOptions
             },
-            {
-                test: /styles\/_variables_imports.scss$/,
-                enforce: 'pre',
-                use: [
-                    'debug-loader',
-                    {
-                        loader: 'string-replace-loader',
-                        options: themeReplaceOptions
-                    },
-                ]
-
-            },
-            {
-                test: /\.scss$/,
-                use: [
-                    {
-                        loader: 'string-replace-loader',
-                        options: themeReplaceOptions
-                    },
-                ]
-
-            },
             {
                 test: /\.ts$/,
                 loader: '@ngtools/webpack'
@@ -113,14 +92,6 @@ module.exports = {
                     path.resolve(__dirname, '..', 'src/styles/_exposed_variables.scss')
                 ],
                 use: [
-                    {
-                        loader: 'string-replace-loader',
-                        options:
-                                {
-                                    search: 'theme\.',
-                                    replace: theme + (theme.length ? '\.' : ''),
-                                }
-                    },
                     {
                         loader: 'raw-loader',
                         options: {
@@ -139,7 +110,16 @@ module.exports = {
                             sourceMap: true
                         }
                     },
-                    'debug-loader',
+                    {
+                        loader: 'string-replace-loader',
+                        options: themeReplaceOptions
+                    },
+                    {
+                        loader: 'sass-resources-loader',
+                        options: {
+                            resources: globalCSSImports
+                        },
+                    },
                     'webpack-import-glob-loader'
                 ]
             },
@@ -150,7 +130,18 @@ module.exports = {
                     loader: "css-loader" // translates CSS into CommonJS
                 }, {
                     loader: "sass-loader" // compiles Sass to CSS
-                }]
+                },
+                    {
+                        loader: 'string-replace-loader',
+                        options: themeReplaceOptions
+                    },
+                    {
+                        loader: 'sass-resources-loader',
+                        options: {
+                            resources: globalCSSImports
+                        },
+                    }
+                ]
             },
             {
                 test: /\.html$/,
@@ -168,10 +159,7 @@ module.exports = {
         }, {
             from: join(__dirname, '..', 'resources', 'i18n'),
             to: join('assets', 'i18n')
-        }, {
-            from: join(__dirname, '..', 'src', 'styles', '_variables_imports.scss'),
-            to: join(__dirname, '..', 'src', 'styles', '_variables.scss')
-        }])
+        }
+        ])
     ]
-
 };
diff --git a/yarn.lock b/yarn.lock
index 785f15fb1f..2ff007fb43 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1108,6 +1108,12 @@ async@^2.0.0, async@^2.5.0:
   dependencies:
     lodash "^4.17.10"
 
+async@^2.1.4:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.2.tgz#18330ea7e6e313887f5d2f2a904bac6fe4dd5381"
+  dependencies:
+    lodash "^4.17.11"
+
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -1333,6 +1339,10 @@ big.js@^3.1.3:
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
   integrity sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==
 
+big.js@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
+
 binary-extensions@^1.0.0:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205"
@@ -5554,6 +5564,12 @@ json5@^0.5.0:
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
   integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
 
+json5@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
+  dependencies:
+    minimist "^1.2.0"
+
 jsonfile@^2.1.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
@@ -5878,6 +5894,14 @@ loader-utils@^1.0.0, loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1
     emojis-list "^2.0.0"
     json5 "^0.5.0"
 
+loader-utils@^1.0.4:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^2.0.0"
+    json5 "^1.0.1"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -6122,6 +6146,10 @@ lodash@4.17.10, lodash@^4.0.0, lodash@^4.0.1, lodash@^4.13.1, lodash@^4.17.0, lo
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
   integrity sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==
 
+lodash@^4.17.11:
+  version "4.17.11"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
+
 log-driver@^1.2.5:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/log-driver/-/log-driver-1.2.7.tgz#63b95021f0702fedfa2c9bb0a24e7797d71871d8"
@@ -9162,6 +9190,15 @@ sass-loader@7.1.0:
     pify "^3.0.0"
     semver "^5.5.0"
 
+sass-resources-loader@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/sass-resources-loader/-/sass-resources-loader-2.0.0.tgz#88569c542fbf1f18f33a6578b77cc5b36c56911d"
+  dependencies:
+    async "^2.1.4"
+    chalk "^1.1.3"
+    glob "^7.1.1"
+    loader-utils "^1.0.4"
+
 saucelabs@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/saucelabs/-/saucelabs-1.5.0.tgz#9405a73c360d449b232839919a86c396d379fd9d"