diff --git a/package.json b/package.json
index d507764227fd..10aea2c42d0e 100644
--- a/package.json
+++ b/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",
diff --git a/webpack/assets/javascripts/react_app/common/variables.scss b/webpack/assets/javascripts/react_app/common/variables.scss
index dea052e654ae..4f3e5239507d 100644
--- a/webpack/assets/javascripts/react_app/common/variables.scss
+++ b/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
diff --git a/webpack/assets/javascripts/react_app/components/Layout/components/ImpersonateIcon/ImpersonateIcon.scss b/webpack/assets/javascripts/react_app/components/Layout/components/ImpersonateIcon/ImpersonateIcon.scss
index fee44434dbca..31fdfd1efca8 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/components/ImpersonateIcon/ImpersonateIcon.scss
+++ b/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% {
diff --git a/webpack/assets/javascripts/react_app/components/Layout/components/TaxonomySwitcher/TaxonomyDropdown.scss b/webpack/assets/javascripts/react_app/components/Layout/components/TaxonomySwitcher/TaxonomyDropdown.scss
index 5f7e814d201c..448bcf664ae2 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/components/TaxonomySwitcher/TaxonomyDropdown.scss
+++ b/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 {
diff --git a/webpack/assets/javascripts/react_app/components/LoginPage/LoginPage.scss b/webpack/assets/javascripts/react_app/components/LoginPage/LoginPage.scss
index 0f15a369da50..c1b7a6d7ab8c 100644
--- a/webpack/assets/javascripts/react_app/components/LoginPage/LoginPage.scss
+++ b/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');
diff --git a/webpack/assets/javascripts/react_app/components/PF4/Bookmarks/bookmarks.scss b/webpack/assets/javascripts/react_app/components/PF4/Bookmarks/bookmarks.scss
index b41b45aad743..e473a8eb10cc 100644
--- a/webpack/assets/javascripts/react_app/components/PF4/Bookmarks/bookmarks.scss
+++ b/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;
diff --git a/webpack/assets/javascripts/react_app/components/PasswordStrength/PasswordStrength.scss b/webpack/assets/javascripts/react_app/components/PasswordStrength/PasswordStrength.scss
index db05e547a3c1..33411cb7a70b 100644
--- a/webpack/assets/javascripts/react_app/components/PasswordStrength/PasswordStrength.scss
+++ b/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 {
diff --git a/webpack/assets/javascripts/react_app/components/SearchBar/SearchBar.scss b/webpack/assets/javascripts/react_app/components/SearchBar/SearchBar.scss
index 5754da7f48a6..2f849d93537f 100644
--- a/webpack/assets/javascripts/react_app/components/SearchBar/SearchBar.scss
+++ b/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%;
diff --git a/webpack/assets/javascripts/react_app/components/common/forms/DateTime/DateTimeOverrides.scss b/webpack/assets/javascripts/react_app/components/common/forms/DateTime/DateTimeOverrides.scss
index 31c6f3a6c933..c7c4118fbcff 100644
--- a/webpack/assets/javascripts/react_app/components/common/forms/DateTime/DateTimeOverrides.scss
+++ b/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;
diff --git a/webpack/assets/javascripts/react_app/components/common/forms/NumericInput.scss b/webpack/assets/javascripts/react_app/components/common/forms/NumericInput.scss
index 1e06824d4cd7..4dac7c188b6a 100644
--- a/webpack/assets/javascripts/react_app/components/common/forms/NumericInput.scss
+++ b/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;