add projectroot to sass includedPaths instead of using replace to fix the paths during build

package.json

@@ -25,8 +25,8 @@
     "prebuild:aot": "yarn run prebuild",
     "prebuild:prod": "yarn run prebuild",
     "build": "node ./scripts/webpack.js --progress --mode development",
-    "build:aot": "yarn run syncbuilddir && node ./scripts/resolve-absolute-scss-imports.js && node ./scripts/webpack.js --env.aot --env.server --mode development && node ./scripts/webpack.js --env.aot --env.client --mode development",
+    "build:aot": "yarn run syncbuilddir && node ./scripts/webpack.js --env.aot --env.server --mode development && node ./scripts/webpack.js --env.aot --env.client --mode development",
-    "build:prod": "yarn run syncbuilddir && node ./scripts/resolve-absolute-scss-imports.js && node ./scripts/webpack.js --env.aot --env.server --mode production && node ./scripts/webpack.js --env.aot --env.client --mode production",
+    "build:prod": "yarn run syncbuilddir && node ./scripts/webpack.js --env.aot --env.server --mode production && node ./scripts/webpack.js --env.aot --env.client --mode production",
     "postbuild:prod": "yarn run rollup",
     "rollup": "rollup -c rollup.config.js",
     "prestart": "yarn run build:prod",

scripts/resolve-absolute-scss-imports.js

@@ -1,24 +0,0 @@
-const replace = require('replace-in-file');
-const path = require('path');
-const {
-  projectRoot,
-} = require('../webpack/helpers');
-
-/**
- * This script ensures you can use ~ to reference the project dir
- * in scss imports for AoT builds as well.
- */
-
-
-const options = {
-  files: path.join(projectRoot('build'), '**', '*.scss'),
-  from: /@import '~\/([^']+)/g,
-  to: `@import '${path.join(projectRoot('./'), '$1')}`,
-};
-
-try {
-  replace.sync(options);
-}
-catch (error) {
-  console.error('Error occurred:', error);
-}

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

@@ -1,4 +1,4 @@
-@import '~/src/app/+home-page/home-news/home-news.component.scss';
+@import 'src/app/+home-page/home-news/home-news.component.scss';
 $home-news-link-color: $green !default;
 $home-news-link-color: darken($home-news-link-color, 15%) !default;
 

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

@@ -1,4 +1,4 @@
-@import '~/src/app/+home-page/home-page.component.scss';
+@import 'src/app/+home-page/home-page.component.scss';
 
 div.background-image {
     color: white;

themes/mantis/app/+item-page/simple/item-types/journal-issue/journal-issue.component.scss

@@ -1,4 +1,4 @@
-@import '~/src/app/+item-page/simple/item-types/journal-issue/journal-issue.component.scss';
+@import 'src/app/+item-page/simple/item-types/journal-issue/journal-issue.component.scss';
 
 :host {
     > * {

themes/mantis/app/+item-page/simple/item-types/journal-volume/journal-volume.component.scss

@@ -1,4 +1,4 @@
-@import '~/src/app/+item-page/simple/item-types/journal-volume/journal-volume.component.scss';
+@import 'src/app/+item-page/simple/item-types/journal-volume/journal-volume.component.scss';
 
 :host {
     > * {

themes/mantis/app/+item-page/simple/item-types/journal/journal.component.scss

@@ -1,4 +1,4 @@
-@import '~/src/app/+item-page/simple/item-types/journal/journal.component.scss';
+@import 'src/app/+item-page/simple/item-types/journal/journal.component.scss';
 
 :host {
     > * {

themes/mantis/app/+item-page/simple/item-types/orgunit/orgunit.component.scss

@@ -1,4 +1,4 @@
-@import '~/src/app/+item-page/simple/item-types/orgunit/orgunit.component.scss';
+@import 'src/app/+item-page/simple/item-types/orgunit/orgunit.component.scss';
 
 :host {
     > * {

themes/mantis/app/+item-page/simple/item-types/person/person.component.scss

@@ -1,4 +1,4 @@
-@import '~/src/app/+item-page/simple/item-types/person/person.component.scss';
+@import 'src/app/+item-page/simple/item-types/person/person.component.scss';
 
 :host {
     > * {

themes/mantis/app/+item-page/simple/item-types/project/project.component.scss

@@ -1,4 +1,4 @@
-@import '~/src/app/+item-page/simple/item-types/project/project.component.scss';
+@import 'src/app/+item-page/simple/item-types/project/project.component.scss';
 
 :host {
     > * {

themes/mantis/app/+item-page/simple/item-types/publication/publication.component.scss

@@ -1,4 +1,4 @@
-@import '~/src/app/+item-page/simple/item-types/publication/publication.component.scss';
+@import 'src/app/+item-page/simple/item-types/publication/publication.component.scss';
 
 :host {
     > * {

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

@@ -1,4 +1,4 @@
-@import '~/src/app/+search-page/search-filters/search-filter/search-filter.component.scss';
+@import 'src/app/+search-page/search-filters/search-filter/search-filter.component.scss';
 
 .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

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

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

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

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

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

webpack/helpers.js

@@ -63,18 +63,6 @@ const globalCSSImports = (env) => { return [
   buildRoot('styles/_mixins.scss', env),
 ]};
 
-const themeReplaceOptions =
-  {
-    multiple: [
-      {
-        search: '@import \'~/([^\']+)',
-        replace: '@import \'' + path.join(projectRoot('./'), '$1'),
-        flags: 'g'
-      }
-    ]
-  };
-
-
 const getThemedPath = (componentPath, ext) => {
   const parsedPath = path.parse(componentPath);
   const relativePath = path.relative(srcPath, parsedPath.dir);
@@ -114,6 +102,5 @@ module.exports = {
   getThemedPath,
   themedTest,
   themedUse,
-  globalCSSImports,
+  globalCSSImports
-  themeReplaceOptions
 };

webpack/webpack.common.js

@@ -4,7 +4,6 @@ const {
     projectRoot,
     buildRoot,
     globalCSSImports,
-    themeReplaceOptions,
     themePath,
     themedTest,
     themedUse
@@ -95,7 +94,7 @@ module.exports = (env) => {
                             loader: 'sass-loader',
                             options: {
                                 sourceMap: true,
-                                includePaths: [path.join(themePath, 'styles')]
+                                includePaths: [projectRoot('./'), path.join(themePath, 'styles')]
                             }
                         },
                         {
@@ -103,10 +102,6 @@ module.exports = (env) => {
                             options: {
                                 resources: globalCSSImports(env)
                             },
-                        },
-                        {
-                            loader: 'string-replace-loader',
-                            options: themeReplaceOptions
                         }
                     ]
                 },
@@ -137,12 +132,8 @@ module.exports = (env) => {
                             loader: 'sass-loader',
                             options: {
                                 sourceMap: true,
-                                includePaths: [path.join(themePath, 'styles')]
+                                includePaths: [projectRoot('./'), path.join(themePath, 'styles')]
                             }
-                        },
-                        {
-                            loader: 'string-replace-loader',
-                            options: themeReplaceOptions
                         }
                     ]
                 },

webpack/webpack.test.js

@@ -4,8 +4,7 @@ const {
     themedTest,
     themedUse,
     themePath,
-    globalCSSImports,
+    globalCSSImports
-    themeReplaceOptions
 } = require('./helpers');
 const path = require('path');
 
@@ -171,7 +170,7 @@ module.exports = function (env) {
                             loader: 'sass-loader',
                             options: {
                                 sourceMap: true,
-                                includePaths: [path.join(themePath, 'styles')]
+                                includePaths: [projectRoot('./'), path.join(themePath, 'styles')]
                             }
                         },
                         {
@@ -179,10 +178,6 @@ module.exports = function (env) {
                             options: {
                                 resources: globalCSSImports(env)
                             },
-                        },
-                        {
-                            loader: 'string-replace-loader',
-                            options: themeReplaceOptions
                         }
                     ]
                 },
@@ -213,12 +208,8 @@ module.exports = function (env) {
                             loader: 'sass-loader',
                             options: {
                                 sourceMap: true,
-                                includePaths: [path.join(themePath, 'styles')]
+                                includePaths: [projectRoot('./'), path.join(themePath, 'styles')]
                             }
-                        },
-                        {
-                            loader: 'string-replace-loader',
-                            options: themeReplaceOptions
                         }
                     ]
                 },