diff --git a/angular.json b/angular.json
index 3e2f6150..2ca10f49 100644
--- a/angular.json
+++ b/angular.json
@@ -27,9 +27,6 @@
               "projects/ucap-webmessenger-app/src/favicon.ico",
               "projects/ucap-webmessenger-app/src/assets"
             ],
-            "stylePreprocessorOptions": {
-              "includePaths": ["projects/ucap-webmessenger-ui/src/assets/scss"]
-            },
             "styles": ["projects/ucap-webmessenger-app/src/styles.scss"],
             "scripts": [],
             "customWebpackConfig": {
diff --git a/config/renderer.webpack.config.js b/config/renderer.webpack.config.js
index 89ca4e14..5c087970 100644
--- a/config/renderer.webpack.config.js
+++ b/config/renderer.webpack.config.js
@@ -1,7 +1,18 @@
+const path = require('path');
+
 module.exports = (config, options) => {
   const PRODUCTION = process.env.NODE_ENV === 'production';
 
   config.target = 'electron-renderer';
 
+  config.resolve.alias = {
+    ...config.resolve.alias,
+    '@ucap-webmessenger-scss/ui': path.resolve(
+      __dirname,
+      '..',
+      'projects/ucap-webmessenger-ui/src/assets/scss'
+    )
+  };
+
   return config;
 };
diff --git a/projects/ucap-webmessenger-app/src/styles.scss b/projects/ucap-webmessenger-app/src/styles.scss
index 832b9c56..9f86bf62 100644
--- a/projects/ucap-webmessenger-app/src/styles.scss
+++ b/projects/ucap-webmessenger-app/src/styles.scss
@@ -1,4 +1,4 @@
-@import 'ucap-ui';
+@import '~@ucap-webmessenger-scss/ui/ucap-ui';
 
 @import 'assets/scss/ucap';