61872: switching themes using wpack string replacer

package.json

@@ -107,7 +107,6 @@
     "jsonschema": "1.2.2",
     "jwt-decode": "^2.2.0",
     "methods": "1.1.2",
-    "mini-css-extract-plugin": "^0.6.0",
     "moment": "^2.22.1",
     "morgan": "^1.9.1",
     "ng-mocks": "^6.2.1",
@@ -126,7 +125,6 @@
     "text-mask-core": "5.0.1",
     "ts-loader": "^5.2.1",
     "ts-md5": "^1.2.4",
-    "url-loader": "^1.1.2",
     "uuid": "^3.2.1",
     "webfontloader": "1.6.28",
     "webpack-cli": "^3.1.0",
@@ -215,7 +213,7 @@
     "script-ext-html-webpack-plugin": "2.0.1",
     "source-map": "0.7.3",
     "source-map-loader": "0.2.4",
-    "string-replace-loader": "2.1.1",
+    "string-replace-loader": "^2.1.1",
     "to-string-loader": "1.1.5",
     "ts-helpers": "1.1.2",
     "ts-node": "4.1.0",

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

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

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

@@ -3,8 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'ds-home-page',
   styleUrls: ['./home-page.component.scss'],
-  // templateUrl: './home-page.component.html'
+  templateUrl: './$themePath$/home-page.component.$theme$.html'
-  templateUrl: './themes/home-page.component.mantis.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: './themes/search-facet-option.component.mantis.html',
+  templateUrl: './$themePath$/search-facet-option.component.$theme$.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: './themes/search-facet-range-option.component.mantis.html',
+  templateUrl: './$themePath$/search-facet-range-option.component.$theme$.html',
 })
 
 /**

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

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

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: './themes/search-filters.component.mantis.html',
+  templateUrl: './$themePath$/search-filters.component.$theme$.html',
 })
 
 /**

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

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

src/app/navbar/navbar.component.ts

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

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: './themes/search-form.component.mantis.html'
+  templateUrl: './$themePath$/search-form.component.$theme$.html'
 })
 
 /**

src/styles/_variables.scss

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

webpack/webpack.common.js

@@ -4,9 +4,25 @@ const {
     root,
     join
 } = require('./helpers');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const devMode = process.env.NODE_ENV !== 'production';
 
+const theme = '';
+const themeFolder = '';
+// const theme = 'mantis';
+// const themeFolder = 'themes';
+
+
+const themeReplaceOptions =
+        {
+            multiple: [
+                {
+                    search: '$theme$.',
+                    replace: theme + (themeFolder.length ? '.' : '')
+                },
+                {
+                    search: '$themePath$/',
+                    replace: themeFolder + (themeFolder.length ? '/' : '')
+                }]
+        };
 module.exports = {
     mode: 'development',
     devtool: 'source-map',
@@ -25,6 +41,16 @@ module.exports = {
     },
     module: {
         rules: [
+            {
+                test: /\.component.ts$/,
+                loader: 'string-replace-loader',
+                options: themeReplaceOptions
+            },
+            // {
+            //     test: /styles\/_variables.scss$/,
+            //     loader: 'string-replace-loader',
+            //     options: themeReplaceOptions
+            // },
             {
                 test: /\.ts$/,
                 loader: '@ngtools/webpack'
@@ -63,18 +89,10 @@ module.exports = {
                         options: {
                             sourceMap: true
                         }
-                    },
+                    }, {
-                    {
+                        loader: 'raw-loader',
-                        loader: MiniCssExtractPlugin.loader,
                         options: {
-                            hmr: process.env.NODE_ENV === 'development',
+                            sourceMap: true
-                        },
-                    },
-                    {
-                        loader: 'css-loader',
-                        options: {
-                            sourceMap: true,
-                            url: false
                         }
                     },
                     {
@@ -117,13 +135,7 @@ module.exports = {
         }, {
             from: join(__dirname, '..', 'resources', 'i18n'),
             to: join('assets', 'i18n')
-        }]),
+        }])
-        new MiniCssExtractPlugin({
-            // Options similar to the same options in webpackOptions.output
-            // both options are optional
-            filename: devMode ? '[name].css' : '[name].[hash].css',
-            chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
-        }),
     ]
 
 };