webpack 5 jenkins workaround

package.json

@@ -41,20 +41,17 @@
     "babel-eslint": "^10.0.0",
     "babel-loader": "^8.0.0",
     "cross-env": "^5.2.0",
-    "css-loader": "4.3.0",
+    "css-loader": "6.8.1",
     "css-minimizer-webpack-plugin": "^4.2.2",
-    "cssnano": "^4.1.10",
+    "cssnano": "^5.0.1",
     "dotenv": "^5.0.0",
     "eslint": "^6.7.2",
     "eslint-plugin-spellcheck": "0.0.17",
     "graphql": "^15.5.0",
     "highlight.js": "~9.14.0",
     "mini-css-extract-plugin": "2.7.5",
-    "node-sass": "6.0.0",
-    "optimize-css-assets-webpack-plugin": "^4.0.0",
+    "node-sass": "8.0.0",
     "path-browserify": "^1.0.1",
-    "postcss-loader": "4.3.0",
-    "postcss": "^8.4.12",
     "prettier": "^1.19.1",
     "pretty-format": "26.6.2",
     "raw-loader": "^0.5.1",

webpack/assets/javascripts/react_app/common/variables.scss

@@ -1,3 +1,3 @@
-@import '~@theforeman/vendor/scss/variables';
+@import 'node_modules/@theforeman/vendor/scss/variables.scss';
 
 $header-max-width: calc(#{$pf-global--breakpoint--lg} + 70px); //TODO move into @theforeman/vendor/scss/variables

webpack/assets/javascripts/react_app/components/Layout/components/ImpersonateIcon/ImpersonateIcon.scss

@@ -1,4 +1,4 @@
-@import "~@theforeman/vendor/scss/variables";
+@import "node_modules/@theforeman/vendor/scss/variables";
 
 @keyframes blink {
   0% {

webpack/assets/javascripts/react_app/components/Layout/components/TaxonomySwitcher/TaxonomyDropdown.scss

@@ -1,4 +1,4 @@
-@import '~@theforeman/vendor/scss/variables';
+@import 'node_modules/@theforeman/vendor/scss/variables';
 
 .pf-c-masthead .pf-c-toolbar {
   .pf-c-context-selector__menu-search {

webpack/assets/javascripts/react_app/components/LoginPage/LoginPage.scss

@@ -1,4 +1,4 @@
-@import '~@theforeman/vendor/scss/variables';
+@import 'node_modules/@theforeman/vendor/scss/variables';
 
 $caption_font_weight: 600;
 $background_image: url('../LoginPage/background.svg');

webpack/assets/javascripts/react_app/components/PF4/Bookmarks/bookmarks.scss

@@ -1,4 +1,4 @@
-@import '~@theforeman/vendor/scss/variables';
+@import 'node_modules/@theforeman/vendor/scss/variables';
 
 .bookmarks-dropdown-item {
   word-break: break-word;

webpack/assets/javascripts/react_app/components/PasswordStrength/PasswordStrength.scss

@@ -1,4 +1,4 @@
-@import "~@theforeman/vendor/scss/variables";
+@import "node_modules/@theforeman/vendor/scss/variables";
 @import '../../common/colors.scss';
 
 .ReactPasswordStrength {

webpack/assets/javascripts/react_app/components/SearchBar/SearchBar.scss

@@ -1,4 +1,4 @@
-@import '~@theforeman/vendor/scss/variables';
+@import 'node_modules/@theforeman/vendor/scss/variables';
 
 .autocomplete-search {
   width: 100%;

webpack/assets/javascripts/react_app/components/common/forms/DateTime/DateTimeOverrides.scss

@@ -1,4 +1,4 @@
-@import "~@theforeman/vendor/scss/variables";
+@import "node_modules/@theforeman/vendor/scss/variables";
 
 $screen-md:                  992px !default;
 $screen-md-min:              $screen-md !default;

webpack/assets/javascripts/react_app/components/common/forms/NumericInput.scss

@@ -1,5 +1,5 @@
-@import "~@theforeman/vendor/scss/variables";
-@import "~@theforeman/vendor/scss/mixins";
+@import "node_modules/@theforeman/vendor/scss/variables";
+@import "node_modules/@theforeman/vendor/scss/mixins";
 
 .foreman-numeric-input {
   position: relative;