finished webpack config for switching themes

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",

src/app/+admin/admin-registries/metadata-registry/metadata-registry.component.scss

@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 .selectable-row:hover {
   cursor: pointer;
 }

src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.scss

@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 .selectable-row:hover {
   cursor: pointer;
 }

src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.scss

@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';

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 {

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;

src/app/+collection-page/collection-page.component.scss

@@ -1 +0,0 @@
-@import '../../styles/variables.scss';

src/app/+community-page/community-page.component.scss

@@ -1 +0,0 @@
-@import '../../styles/variables.scss';

src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.scss

@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';

src/app/+community-page/sub-community-list/community-page-sub-community-list.component.scss

@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';

src/app/+home-page/home-news/home-news.component.default.scss

@@ -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;
-}

src/app/+home-page/home-news/home-news.component.scss

@@ -1,2 +1,14 @@
-@import './home-news.component.default';
+:host {
-@import './themes/*.scss';
+    display: block;
+    margin-top: -$content-spacing;
+    margin-bottom: -$content-spacing;
+}
+
+.display-3 {
+    word-break: break-word;
+}
+
+.dspace-logo {
+    height: 110px;
+    width: 110px;
+}

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'],
+  styleUrls: ['./$themePath$/home-news.component.$theme$.scss'],
-  // templateUrl: './home-news.component.html',
   templateUrl: './$themePath$/home-news.component.$theme$.html'
 })
 

src/app/+home-page/home-news/themes/home-news.component.mantis.scss

@@ -1,58 +1,4 @@
-@import '../../../../styles/variables.scss';
+@import '../home-news.component.scss';
-
+.jumbotron {
-: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;
-        }
-
-    }
 }

src/app/+home-page/home-page.component.default.scss

@@ -1,3 +0,0 @@
-:host {
-    //color: red;
-}

src/app/+home-page/home-page.component.scss

@@ -1,2 +1,2 @@
-@import './home-page.component.default';
+:host {
-@import './themes/*.scss';
+}

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 {

src/app/+home-page/themes/home-page.component.mantis.scss

@@ -1,7 +1,4 @@
-@import '../../../styles/variables.scss';
+div.background-image {
-
-:host-context(.mantis) {
-    div.background-image {
     color: white;
     background-color: $info;
     position: relative;
@@ -15,6 +12,7 @@
     .container {
         position: relative;
         text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
+
         &:before, &:after {
             content: '';
             display: block;
@@ -34,6 +32,7 @@
             background: linear-gradient(to right, $banner-text-background, transparent);
             right: -$banner-background-gradient-width;
         }
+
         background-color: $banner-text-background;
     }
 
@@ -42,11 +41,10 @@
         a {
             color: inherit;
         }
+
         opacity: 0.3;
         position: absolute;
         right: $spacer;
         bottom: 0;
     }
-
-    }
 }

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;
 }

src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss

@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';

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;

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;

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;

src/app/+item-page/field-components/metadata-uri-values/metadata-uri-values.component.scss

@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';

src/app/+item-page/field-components/metadata-values/metadata-values.component.scss

@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';

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;

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;

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;

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 {

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 {

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 {

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 {

src/app/+search-page/search-filters/search-filter/search-filter.component.default.scss

@@ -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;
-  }
-}

src/app/+search-page/search-filters/search-filter/search-filter.component.scss

@@ -1,2 +1,10 @@
-@import './search-filter.component.default';
+:host .facet-filter {
-@import './themes/*.scss';
+    border: 1px solid map-get($theme-colors, light);
+    cursor: pointer;
+    .search-filter-wrapper.closed {
+        overflow: hidden;
+    }
+    .filter-toggle {
+        line-height: $line-height-base;
+    }
+}

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'],
+  styleUrls: ['./$themePath$/search-filter.component.$theme$.scss'],
-  // templateUrl: './search-filter.component.html',
   templateUrl: './$themePath$/search-filter.component.$theme$.html',
   animations: [slide],
 })

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;

src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.default.scss

@@ -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;
-        }
-    }
-}

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';
+.filters {
-@import './themes/*.scss';
+    .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;
+        }
+    }
+}

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]
 })

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 {
-    ::ng-deep .noUi-connect {
     background: $info;
-    }
 }

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 {

src/app/+search-page/search-filters/search-filter/themes/search-filter.component.mantis.scss

@@ -1,7 +1,6 @@
-@import '../../../../../styles/variables.scss';
+@import '../search-filter.component';
-@import '../../../../../styles/mixins.scss';
 
-:host-context(.mantis) .facet-filter {
+.facet-filter {
     background-color: map-get($theme-colors, light);
     border-radius: $border-radius;
 

src/app/+search-page/search-filters/search-filters.component.scss

@@ -1,2 +0,0 @@
-@import '../../../styles/variables.scss';
-@import '../../../styles/mixins.scss';

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 {

src/app/+search-page/search-settings/search-settings.component.default.scss

@@ -1,5 +0,0 @@
-@import '../../../styles/variables.scss';
-
-.setting-option {
-  border: 1px solid map-get($theme-colors, light);
-}

src/app/+search-page/search-settings/search-settings.component.scss

@@ -1,2 +1,3 @@
-@import './search-settings.component.default';
+.setting-option {
-@import './themes/*.scss';
+    border: 1px solid map-get($theme-colors, light);
+}

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'],
+  styleUrls: ['./$themePath$/search-settings.component.$theme$.scss'],
-  // templateUrl: './search-settings.component.html'
   templateUrl: './$themePath$/search-settings.component.$theme$.html'
 })
 

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 {
+.setting-option {
     background-color: map-get($theme-colors, light);
     border-radius: $border-radius;
-
     h5 {
         font-size: 1.1rem
     }
 }
+

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;

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';

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));
 

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;

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;

src/app/header/header.component.default.scss

@@ -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;
-}

src/app/header/header.component.scss

@@ -1,2 +1,10 @@
-@import './header.component.default';
+.navbar-brand img {
-@import './themes/*.scss';
+    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;
+}

src/app/header/themes/header.component.mantis.scss

@@ -1,7 +0,0 @@
-@import '../../../styles/variables.scss';
-
-:host-context(.mantis) {
-    ::ng-deep a {
-        //color: $dark;
-    }
-}

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%;

src/app/navbar/navbar.component.default.scss

@@ -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;
-    }
-}
-
-

src/app/navbar/navbar.component.scss

@@ -1,3 +1,35 @@
-@import './navbar.component.default';
+nav.navbar {
-@import './themes/*.scss';
+    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;
+    }
+}

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'],
+  styleUrls: ['./$themePath$/navbar.component.$theme$.scss'],
-  // templateUrl: './navbar.component.html',
   templateUrl: './$themePath$/navbar.component.$theme$.html',
   animations: [slideMobileNav]
 })

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 {
-    nav.navbar {
     border-bottom: 5px $green solid;
-    }
 }
 
 

src/app/pagenotfound/pagenotfound.component.scss

@@ -1 +0,0 @@
-@import '../../styles/variables.scss';

src/app/shared/chips/chips.component.scss

@@ -1,5 +1,3 @@
-@import "../../../styles/variables";
-
 .chip-selected {
   background-color: map-get($theme-colors, info) !important;
 }

src/app/shared/comcol-page-content/comcol-page-content.component.scss

@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';

src/app/shared/comcol-page-header/comcol-page-header.component.scss

@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';

src/app/shared/comcol-page-logo/comcol-page-logo.component.scss

@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';

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
 }

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;

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;

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;

src/app/shared/input-suggestions/input-suggestions.component.scss

@@ -1,5 +1,3 @@
-@import "../../../styles/_variables.scss";
-
 .autocomplete {
     width: 100%;
     .dropdown-item {

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;
 }

src/app/shared/notifications/notification/notification.component.scss

@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 .alert {
   display: inline-block;
   min-width: $modal-sm;

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;

src/app/shared/object-collection/object-collection.component.scss

@@ -1 +0,0 @@
-@import '../../../styles/variables';

src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss

@@ -1,2 +1 @@
-@import '../../../../styles/variables';
 

src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss

@@ -1,2 +1 @@
-@import '../../../../styles/variables';
 

src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.scss

@@ -1 +0,0 @@
-@import '../../../../styles/variables';

src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss

@@ -1,2 +1 @@
-@import '../../../../styles/variables';
 

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 {

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';

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';
 

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;

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;

src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss

@@ -1,2 +1 @@
-@import '../../../../styles/variables';
 

src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.scss

@@ -1 +0,0 @@
-@import '../../../../styles/variables';

src/app/shared/object-list/collection-list-element/collection-list-element.component.scss

@@ -1 +0,0 @@
-@import '../../../../styles/variables';

src/app/shared/object-list/community-list-element/community-list-element.component.scss

@@ -1 +0,0 @@
-@import '../../../../styles/variables';

src/app/shared/object-list/item-list-element/item-list-element.component.scss

@@ -1 +0,0 @@
-@import '../../../../styles/variables';

src/app/shared/object-list/object-list.component.scss

@@ -1 +0,0 @@
-@import '../../../styles/variables';

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';

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';

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';

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;

src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.scss

@@ -1,2 +1 @@
-@import '../../../../styles/variables';
 

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;

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;

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;

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 {

src/app/shared/uploader/uploader.component.scss

@@ -1,5 +1,3 @@
-@import '../../../styles/_variables.scss';
-
 .ds-base-drop-zone {
   border: 2px dashed $gray-600;
 }