moved themes to separate folder

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

@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ds-home-news',
-  styleUrls: ['./$themePath$/home-news.component.$theme$.scss'],
-  templateUrl: './$themePath$/home-news.component.$theme$.html'
+  styleUrls: ['./home-news.component.scss'],
+  templateUrl: './home-news.component.html'
 })
 
 /**

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

@@ -1,4 +0,0 @@
-@import '../home-news.component.scss';
-.jumbotron {
-    background-color: transparent;
-}

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

@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ds-home-page',
-  styleUrls: ['./$themePath$/home-page.component.$theme$.scss'],
-  templateUrl: './$themePath$/home-page.component.$theme$.html'
+  styleUrls: ['./home-page.component.scss'],
+  templateUrl: './home-page.component.html'
 })
 export class HomePageComponent {
 }

src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.ts

@@ -14,7 +14,7 @@ import { FilterType } from '../../../../search-service/filter-type.model';
   selector: 'ds-search-facet-option',
   styleUrls: ['./search-facet-option.component.scss'],
   // templateUrl: './search-facet-option.component.html',
-  templateUrl: './$themePath$/search-facet-option.component.$theme$.html',
+  templateUrl: './search-facet-option.component.html',
 })
 
 /**

src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.ts

@@ -19,7 +19,7 @@ const rangeDelimiter = '-';
   selector: 'ds-search-facet-range-option',
   styleUrls: ['./search-facet-range-option.component.scss'],
   // templateUrl: './search-facet-range-option.component.html',
-  templateUrl: './$themePath$/search-facet-range-option.component.$theme$.html',
+  templateUrl: './search-facet-range-option.component.html',
 })
 
 /**

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

@@ -13,8 +13,8 @@ import { SEARCH_CONFIG_SERVICE } from '../../../+my-dspace-page/my-dspace-page.c
 
 @Component({
   selector: 'ds-search-filter',
-  styleUrls: ['./$themePath$/search-filter.component.$theme$.scss'],
-  templateUrl: './$themePath$/search-filter.component.$theme$.html',
+  styleUrls: ['./search-filter.component.scss'],
+  templateUrl: './search-filter.component.html',
   animations: [slide],
 })
 

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: ['./$themePath$/search-range-filter.component.$theme$.scss'],
+  styleUrls: ['./search-range-filter.component.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,5 +0,0 @@
-@import '../search-range-filter.component';
-
-::ng-deep .noUi-connect {
-    background: $info;
-}

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

@@ -14,7 +14,7 @@ import { SEARCH_CONFIG_SERVICE } from '../../+my-dspace-page/my-dspace-page.comp
 @Component({
   selector: 'ds-search-filters',
   styleUrls: ['./search-filters.component.scss'],
-  templateUrl: './$themePath$/search-filters.component.$theme$.html',
+  templateUrl: './search-filters.component.html',
 })
 
 /**

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

@@ -9,8 +9,8 @@ import { SEARCH_CONFIG_SERVICE } from '../../+my-dspace-page/my-dspace-page.comp
 
 @Component({
   selector: 'ds-search-settings',
-  styleUrls: ['./$themePath$/search-settings.component.$theme$.scss'],
-  templateUrl: './$themePath$/search-settings.component.$theme$.html'
+  styleUrls: ['./search-settings.component.scss'],
+  templateUrl: './search-settings.component.html'
 })
 
 /**

src/app/navbar/navbar.component.ts

@@ -12,8 +12,8 @@ import { HostWindowService } from '../shared/host-window.service';
  */
 @Component({
   selector: 'ds-navbar',
-  styleUrls: ['./$themePath$/navbar.component.$theme$.scss'],
-  templateUrl: './$themePath$/navbar.component.$theme$.html',
+  styleUrls: ['./navbar.component.scss'],
+  templateUrl: './navbar.component.html',
   animations: [slideMobileNav]
 })
 export class NavbarComponent extends MenuComponent implements OnInit {

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

@@ -1,7 +0,0 @@
-@import '../navbar.component.scss';
-
-nav.navbar {
-    border-bottom: 5px $green solid;
-}
-
-

src/app/shared/search-form/search-form.component.ts

@@ -16,7 +16,7 @@ import { SearchService } from '../../+search-page/search-service/search.service'
   selector: 'ds-search-form',
   styleUrls: ['./search-form.component.scss'],
   // templateUrl: './search-form.component.html',
-  templateUrl: './$themePath$/search-form.component.$theme$.html'
+  templateUrl: './search-form.component.html'
 })
 
 /**

src/styles/_variables.scss

@@ -1,11 +1,13 @@
 @import '_functions.scss';
 @import '../../node_modules/bootstrap/scss/functions.scss';
 
-@import '$themePath$/bootstrap_variables.$theme$.scss';
+//@import '$themePath$/bootstrap_variables.scss';
+@import '../../themes/mantis/styles/bootstrap_variables.scss';
 
 @import 'bootstrap_variables.scss';
 @import '../../node_modules/bootstrap/scss/variables.scss';
 
-@import '$themePath$/custom_variables.$theme$.scss';
+//@import '$themePath$/custom_variables.scss';
+@import '../../themes/mantis/styles/custom_variables.scss';
 
 @import 'custom_variables.scss';

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

@@ -0,0 +1,4 @@
+@import '../../../../../src/app/+home-page/home-news/home-news.component';
+.jumbotron {
+    background-color: transparent;
+}

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

@@ -1,4 +1,4 @@
-@import '../search-filter.component';
+@import '../../../../../../src/app/+search-page/search-filters/search-filter/search-filter.component';
 
 .facet-filter {
     background-color: map-get($theme-colors, light);

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

@@ -0,0 +1,5 @@
+@import '../../../../../../../src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component';
+
+::ng-deep .noUi-connect {
+    background: $info;
+}

themes/mantis/app/+search-page/search-settings/search-settings.component.scss

@@ -1,4 +1,4 @@
-@import '../search-settings.component';
+@import '../../../../../src/app/+search-page/search-settings/search-settings.component';
 
 .setting-option {
     background-color: map-get($theme-colors, light);

themes/mantis/app/navbar/navbar.component.scss

@@ -0,0 +1,7 @@
+@import '../../../../src/app/navbar/navbar.component.scss';
+
+nav.navbar {
+    border-bottom: 5px $green solid;
+}
+
+

webpack/helpers.js

@@ -1,6 +1,7 @@
 const {
     join,
     resolve,
+    normalize,
 } = require('path');
 
 
@@ -8,8 +9,10 @@ function root(path) {
     return resolve(__dirname, '..', path);
 }
 
-const theme = '';
-// const theme = 'mantis';
+// const theme = '';
+const theme = 'mantis';
+
+const themePath = normalize(join(__dirname, '..', 'themes', theme));
 
 const globalCSSImports = [
     resolve(__dirname, '..', 'src/styles/_variables.scss'),
@@ -19,24 +22,10 @@ const globalCSSImports = [
 const themeReplaceOptions =
         {
             multiple: [
-                {
-                    search: '$theme$.',
-                    replace: theme + (theme.length ? '.' : ''),
-
-                },
                 {
                     search: '$themePath$/',
-                    replace: (theme.length ? 'themes/' : ''),
+                    replace: (themePath.length ? themePath + '/' : ''),
 
-                },
-                {
-                    search: '$theme$.',
-                    replace: (theme.length ? theme + '.' : ''),
-
-                },
-                {
-                    search: '$themePath$/',
-                    replace: (theme.length ? 'themes/' : ''),
                 }
             ]
         };
@@ -45,6 +34,7 @@ module.exports = {
     root: root,
     join: join,
     theme: theme,
+    themePath: themePath,
     globalCSSImports: globalCSSImports,
     themeReplaceOptions: themeReplaceOptions
 };

webpack/webpack.common.js

@@ -1,12 +1,22 @@
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const path = require('path');
+const fs = require('fs');
 const {
   root,
   join,
   globalCSSImports,
-    themeReplaceOptions
+  themeReplaceOptions,
+  theme,
+  themePath
 } = require('./helpers');
 
+const srcPath = root('src');
+
+const getThemedPath = (componentPath, ext) => {
+  const parsedPath = path.parse(componentPath);
+  const relativePath = path.relative(srcPath, parsedPath.dir);
+  return path.join(themePath, relativePath, `${parsedPath.name}.${ext}`);
+};
 
 module.exports = {
   mode: 'development',
@@ -27,9 +37,58 @@ module.exports = {
   module: {
     rules: [
       {
-                test: /\.component.ts$/,
+        test: (filePath) => {
+          if (/\.component.ts$/.test(filePath)) {
+            const themedStylePath = getThemedPath(filePath, 'scss');
+            return fs.existsSync(themedStylePath);
+          } else {
+            return false;
+          }
+        },
+        use: (info) => {
+          const parsedPath = path.parse(info.resource);
+          const themedStylePath = getThemedPath(info.resource, 'scss');
+
+          return [
+            'debug-loader',
+            {
               loader: 'string-replace-loader',
-                options: themeReplaceOptions
+              options: {
+                search: `\.\/${parsedPath.name}\.scss`,
+                replace: themedStylePath,
+                flags: 'g'
+              }
+
+            }
+          ]
+        }
+      },
+      {
+        test: (filePath) => {
+          if (/\.component.ts$/.test(filePath)) {
+            const themedTemplatePath = getThemedPath(filePath, 'html');
+            return fs.existsSync(themedTemplatePath);
+          } else {
+            return false;
+          }
+        },
+        use: (info) => {
+          const parsedPath = path.parse(info.resource);
+          const themedTemplatePath = getThemedPath(info.resource, 'html');
+
+          return [
+            'debug-loader',
+            {
+              loader: 'string-replace-loader',
+              options: {
+                search: `\.\/${parsedPath.name}\.html`,
+                replace: themedTemplatePath,
+                flags: 'g'
+              }
+
+            }
+          ]
+        }
       },
       {
         test: /\.ts$/,

webpack/webpack.server.js

@@ -12,7 +12,6 @@ module.exports = {
       output: {
         filename: 'server.js'
       },
-    module: {rules: []},
     target: 'node',
       externals: [nodeExternals({
         whitelist: [