Update css-loader and switch to webpack 5's asset modules (#2566)

2024-12-24 02:55:20 +01:00 · 2022-09-12 02:34:58 +02:00 · 2022-09-12 02:34:58 +02:00 · 97e3813182
commit 97e3813182
parent 7bcbeacd9b
8 changed files with 144 additions and 193 deletions
--- a/_scripts/webpack.main.config.js
+++ b/_scripts/webpack.main.config.js
@ -73,22 +73,6 @@ if (isDevMode) {
              ignore: ['**/.*', '**/pwabuilder-sw.js', '**/dashFiles/**', '**/storyboards/**'],
            },
          },
-          {
-            from: path.join(__dirname, '../_icons'),
-            to: path.join(__dirname, '../dist/_icons'),
-            globOptions: {
-              dot: true,
-              ignore: ['**/.*'],
-            },
-          },
-          {
-            from: path.join(__dirname, '../src/renderer/assets/img'),
-            to: path.join(__dirname, '../dist/images'),
-            globOptions: {
-              dot: true,
-              ignore: ['**/.*'],
-            },
-          },
      ]
    })
  )
--- a/_scripts/webpack.renderer.config.js
+++ b/_scripts/webpack.renderer.config.js
@ -51,7 +51,12 @@ const config = {
          {
            loader: MiniCssExtractPlugin.loader,
          },
-          'css-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              esModule: false
+            }
+          },
          {
            loader: 'sass-loader',
            options: {
@ -70,30 +75,27 @@ const config = {
          {
            loader: MiniCssExtractPlugin.loader
          },
-          'css-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              esModule: false
+            }
+          }
        ],
      },
      {
        test: /\.(png|jpe?g|gif|tif?f|bmp|webp|svg)(\?.*)?$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            esModule: false,
-            limit: 10000,
-            name: 'imgs/[name]--[folder].[ext]',
-          },
-        },
+        type: 'asset/resource',
+        generator: {
+          filename: 'imgs/[name][ext]'
+        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            esModule: false,
-            limit: 10000,
-            name: 'fonts/[name]--[folder].[ext]',
-          },
-        },
+        type: 'asset/resource',
+        generator: {
+          filename: 'fonts/[name][ext]'
+        }
      },
    ],
  },
--- a/_scripts/webpack.web.config.js
+++ b/_scripts/webpack.web.config.js
@ -47,7 +47,12 @@ const config = {
          {
            loader: MiniCssExtractPlugin.loader,
          },
-          'css-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              esModule: false
+            }
+          },
          {
            loader: 'sass-loader',
            options: {
@ -66,7 +71,12 @@ const config = {
          {
            loader: MiniCssExtractPlugin.loader
          },
-          'css-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              esModule: false
+            }
+          }
        ],
      },
      {
@ -75,25 +85,17 @@ const config = {
      },
      {
        test: /\.(png|jpe?g|gif|tif?f|bmp|webp|svg)(\?.*)?$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            esModule: false,
-            limit: 10000,
-            name: 'imgs/[name]--[folder].[ext]',
-          },
-        },
+        type: 'asset/resource',
+        generator: {
+          filename: 'imgs/[name][ext]'
+        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            esModule: false,
-            limit: 10000,
-            name: 'fonts/[name]--[folder].[ext]',
-          },
-        },
+        type: 'asset/resource',
+        generator: {
+          filename: 'fonts/[name][ext]'
+        }
      },
    ],
  },
@ -163,22 +165,6 @@ if (isDevMode) {
              ignore: ['**/.*', '**/pwabuilder-sw.js', '**/dashFiles/**', '**/storyboards/**'],
            },
          },
-          {
-            from: path.join(__dirname, '../_icons'),
-            to: path.join(__dirname, '../dist/web/_icons'),
-            globOptions: {
-              dot: true,
-              ignore: ['**/.*'],
-            },
-          },
-          {
-            from: path.join(__dirname, '../src/renderer/assets/img'),
-            to: path.join(__dirname, '../dist/web/images'),
-            globOptions: {
-              dot: true,
-              ignore: ['**/.*'],
-            },
-          },
      ]
    })
  )
--- a/package.json
+++ b/package.json
@ -91,7 +91,7 @@
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.5",
    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "5.2.6",
+    "css-loader": "^6.7.1",
    "electron": "^20.1.2",
    "electron-builder": "^23.3.3",
    "electron-debug": "^3.2.0",
@ -104,7 +104,6 @@
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-standard": "^5.0.0",
    "eslint-plugin-vue": "^7.17.0",
-    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.2",
    "mini-css-extract-plugin": "^2.2.2",
    "node-loader": "^2.0.0",
@ -115,7 +114,6 @@
    "sass-loader": "^13.0.2",
    "style-loader": "^3.2.1",
    "tree-kill": "1.2.2",
-    "url-loader": "^4.1.1",
    "vue-devtools": "^5.1.4",
    "vue-eslint-parser": "^7.10.0",
    "vue-loader": "^15.9.8",
--- a/src/renderer/components/ft-share-button/ft-share-button.sass
+++ b/src/renderer/components/ft-share-button/ft-share-button.sass
@ -58,7 +58,7 @@
 				.dracula &,
 				.CatppuccinMocha &,
 				.system[data-system-theme*='dark'] &
-					background-image: url(~../../assets/img/invidious-logo-dark.svg)
+					background-image: url(../../assets/img/invidious-logo-dark.svg)

 				.light &, .system[data-system-theme*='light'] &
-					background-image: url(~../../assets/img/invidious-logo-light.svg)
+					background-image: url(../../assets/img/invidious-logo-light.svg)
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@ -18,8 +18,8 @@
  --side-nav-active-color: #757575;
  --search-bar-color: #f5f5f5;
  --instance-menu-color: var(--search-bar-color);
-  --logo-icon: url("~../../_icons/iconColorSmall.png");
-  --logo-text: url("~../../_icons/textColorSmall.png");
+  --logo-icon: url("../../_icons/iconColorSmall.png");
+  --logo-text: url("../../_icons/textColorSmall.png");
 }

 .system[data-system-theme*='dark'], .dark {
@ -42,8 +42,8 @@
  --side-nav-active-color: #303030;
  --search-bar-color: #262626;
  --instance-menu-color: var(--search-bar-color);
-  --logo-icon: url("~../../_icons/iconColorSmall.png");
-  --logo-text: url("~../../_icons/textColorSmall.png");
+  --logo-icon: url("../../_icons/iconColorSmall.png");
+  --logo-text: url("../../_icons/textColorSmall.png");
 }

 .black {
@ -66,8 +66,8 @@
    --side-nav-active-color: #303030;
    --search-bar-color: #262626;
    --instance-menu-color: var(--search-bar-color);
-	  --logo-icon: url("~../../_icons/iconColorSmall.png");
-   	--logo-text: url("~../../_icons/textColorSmall.png");
+    --logo-icon: url("../../_icons/iconColorSmall.png");
+    --logo-text: url("../../_icons/textColorSmall.png");
 }

 .gray {
@ -84,8 +84,8 @@
  --side-nav-hover-color: #212121;
  --side-nav-active-color: #303030;
  --search-bar-color: #212121;
-  --logo-icon: url("~../../_icons/iconColorSmall.png");
-  --logo-text: url("~../../_icons/textColorSmall.png");
+  --logo-icon: url("../../_icons/iconColorSmall.png");
+  --logo-text: url("../../_icons/textColorSmall.png");
 }

 .dracula {
@ -108,8 +108,8 @@
  --side-nav-active-color: #3D4051;
  --search-bar-color: #3E3F4A;
  --instance-menu-color: var(--search-bar-color);
-  --logo-icon: url("~../../_icons/iconDraculaLightSmall.png");
-  --logo-text: url("~../../_icons/textDraculaLightSmall.png");
+  --logo-icon: url("../../_icons/iconDraculaLightSmall.png");
+  --logo-text: url("../../_icons/textDraculaLightSmall.png");
 }

 .catppuccinMocha {
@ -132,8 +132,8 @@
  --side-nav-active-color: #11111b;
  --search-bar-color: #313244;
  --instance-menu-color: var(--search-bar-color);
-  --logo-icon: url("~../../_icons/iconCatppuccinMochaLightSmall.png");
-  --logo-text: url("~../../_icons/textCatppuccinMochaLightSmall.png");
+  --logo-icon: url("../../_icons/iconCatppuccinMochaLightSmall.png");
+  --logo-text: url("../../_icons/textCatppuccinMochaLightSmall.png");
 }

 .mainRed {
@ -141,8 +141,8 @@
  --primary-color-hover: #e53935;
  --primary-color-active: #c62828;
  --text-with-main-color: #FFFFFF;
-  --logo-icon-bar-color: url("~../../_icons/iconWhite.png");
-  --logo-text-bar-color: url("~../../_icons/textWhite.png");
+  --logo-icon-bar-color: url("../../_icons/iconWhite.png");
+  --logo-text-bar-color: url("../../_icons/textWhite.png");
 }

 .mainPink {
@ -150,8 +150,8 @@
  --primary-color-hover: #D81B60;
  --primary-color-active: #AD1457;
  --text-with-main-color: #FFFFFF;
-  --logo-icon-bar-color: url("~../../_icons/iconWhite.png");
-  --logo-text-bar-color: url("~../../_icons/textWhite.png");
+  --logo-icon-bar-color: url("../../_icons/iconWhite.png");
+  --logo-text-bar-color: url("../../_icons/textWhite.png");
 }

 .mainPurple {
@ -159,8 +159,8 @@
  --primary-color-hover: #8E24AA;
  --primary-color-active: #6A1B9A;
  --text-with-main-color: #FFFFFF;
-  --logo-icon-bar-color: url("~../../_icons/iconWhite.png");
-  --logo-text-bar-color: url("~../../_icons/textWhite.png");
+  --logo-icon-bar-color: url("../../_icons/iconWhite.png");
+  --logo-text-bar-color: url("../../_icons/textWhite.png");
 }

 .mainDeepPurple {
@ -168,8 +168,8 @@
  --primary-color-hover: #5E35B1;
  --primary-color-active: #4527A0;
  --text-with-main-color: #FFFFFF;
-  --logo-icon-bar-color: url("~../../_icons/iconWhite.png");
-  --logo-text-bar-color: url("~../../_icons/textWhite.png");
+  --logo-icon-bar-color: url("../../_icons/iconWhite.png");
+  --logo-text-bar-color: url("../../_icons/textWhite.png");
 }

 .mainIndigo {
@ -177,8 +177,8 @@
  --primary-color-hover: #3949AB;
  --primary-color-active: #283593;
  --text-with-main-color: #FFFFFF;
-  --logo-icon-bar-color: url("~../../_icons/iconWhite.png");
-  --logo-text-bar-color: url("~../../_icons/textWhite.png");
+  --logo-icon-bar-color: url("../../_icons/iconWhite.png");
+  --logo-text-bar-color: url("../../_icons/textWhite.png");
 }

 .mainBlue {
@ -186,8 +186,8 @@
  --primary-color-hover: #1E88E5;
  --primary-color-active: #1565C0;
  --text-with-main-color: #FFFFFF;
-  --logo-icon-bar-color: url("~../../_icons/iconWhite.png");
-  --logo-text-bar-color: url("~../../_icons/textWhite.png");
+  --logo-icon-bar-color: url("../../_icons/iconWhite.png");
+  --logo-text-bar-color: url("../../_icons/textWhite.png");
 }

 .mainLightBlue {
@ -195,8 +195,8 @@
  --primary-color-hover: #039BE5;
  --primary-color-active: #0277BD;
  --text-with-main-color: #FFFFFF;
-  --logo-icon-bar-color: url("~../../_icons/iconWhite.png");
-  --logo-text-bar-color: url("~../../_icons/textWhite.png");
+  --logo-icon-bar-color: url("../../_icons/iconWhite.png");
+  --logo-text-bar-color: url("../../_icons/textWhite.png");
 }

 .mainCyan {
@ -204,8 +204,8 @@
  --primary-color-hover: #00ACC1;
  --primary-color-active: #00838F;
  --text-with-main-color: #FFFFFF;
-  --logo-icon-bar-color: url("~../../_icons/iconWhite.png");
-  --logo-text-bar-color: url("~../../_icons/textWhite.png");
+  --logo-icon-bar-color: url("../../_icons/iconWhite.png");
+  --logo-text-bar-color: url("../../_icons/textWhite.png");
 }

 .mainTeal {
@ -213,8 +213,8 @@
  --primary-color-hover: #00897B;
  --primary-color-active: #00695C;
  --text-with-main-color: #FFFFFF;
-  --logo-icon-bar-color: url("~../../_icons/iconWhite.png");
-  --logo-text-bar-color: url("~../../_icons/textWhite.png");
+  --logo-icon-bar-color: url("../../_icons/iconWhite.png");
+  --logo-text-bar-color: url("../../_icons/textWhite.png");
 }

 .mainGreen {
@ -222,8 +222,8 @@
  --primary-color-hover: #43A047;
  --primary-color-active: #2E7D32;
  --text-with-main-color: #FFFFFF;
-  --logo-icon-bar-color: url("~../../_icons/iconWhite.png");
-  --logo-text-bar-color: url("~../../_icons/textWhite.png");
+  --logo-icon-bar-color: url("../../_icons/iconWhite.png");
+  --logo-text-bar-color: url("../../_icons/textWhite.png");
 }

 .mainLightGreen {
@ -231,8 +231,8 @@
  --primary-color-hover: #7CB342;
  --primary-color-active: #558B2F;
  --text-with-main-color: #000000;
-  --logo-icon-bar-color: url("~../../_icons/iconBlackSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textBlackSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconBlackSmall.png");
+  --logo-text-bar-color: url("../../_icons/textBlackSmall.png");
 }

 .mainLime {
@ -240,8 +240,8 @@
  --primary-color-hover: #C0CA33;
  --primary-color-active: #9E9D24;
  --text-with-main-color: #000000;
-  --logo-icon-bar-color: url("~../../_icons/iconBlackSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textBlackSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconBlackSmall.png");
+  --logo-text-bar-color: url("../../_icons/textBlackSmall.png");
 }

 .mainYellow {
@ -249,8 +249,8 @@
  --primary-color-hover: #FDD835;
  --primary-color-active: #F9A825;
  --text-with-main-color: #000000;
-  --logo-icon-bar-color: url("~../../_icons/iconBlackSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textBlackSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconBlackSmall.png");
+  --logo-text-bar-color: url("../../_icons/textBlackSmall.png");
 }

 .mainAmber {
@ -258,8 +258,8 @@
  --primary-color-hover: #FFB300;
  --primary-color-active: #FF8F00;
  --text-with-main-color: #000000;
-  --logo-icon-bar-color: url("~../../_icons/iconBlackSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textBlackSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconBlackSmall.png");
+  --logo-text-bar-color: url("../../_icons/textBlackSmall.png");
 }

 .mainOrange {
@ -267,8 +267,8 @@
  --primary-color-hover: #FB8C00;
  --primary-color-active: #EF6C00;
  --text-with-main-color: #000000;
-  --logo-icon-bar-color: url("~../../_icons/iconBlackSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textBlackSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconBlackSmall.png");
+  --logo-text-bar-color: url("../../_icons/textBlackSmall.png");
 }

 .mainDeepOrange {
@ -276,8 +276,8 @@
  --primary-color-hover: #F4511E;
  --primary-color-active: #D84315;
  --text-with-main-color: #000000;
-  --logo-icon-bar-color: url("~../../_icons/iconBlackSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textBlackSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconBlackSmall.png");
+  --logo-text-bar-color: url("../../_icons/textBlackSmall.png");
 }

 .mainDraculaCyan {
@ -285,8 +285,8 @@
  --primary-color-hover: #97EBFD;
  --primary-color-active: #7DD2E4;
  --text-with-main-color: #282A36;
-  --logo-icon-bar-color: url("~../../_icons/iconDraculaDarkSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textDraculaDarkSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconDraculaDarkSmall.png");
+  --logo-text-bar-color: url("../../_icons/textDraculaDarkSmall.png");
 }

 .mainDraculaGreen {
@ -294,8 +294,8 @@
  --primary-color-hover: #62FB88;
  --primary-color-active: #48E16F;
  --text-with-main-color: #282A36;
-  --logo-icon-bar-color: url("~../../_icons/iconDraculaDarkSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textDraculaDarkSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconDraculaDarkSmall.png");
+  --logo-text-bar-color: url("../../_icons/textDraculaDarkSmall.png");
 }

 .mainDraculaOrange {
@ -303,8 +303,8 @@
  --primary-color-hover: #FFBF7B;
  --primary-color-active: #E6A661;
  --text-with-main-color: #282A36;
-  --logo-icon-bar-color: url("~../../_icons/iconDraculaDarkSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textDraculaDarkSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconDraculaDarkSmall.png");
+  --logo-text-bar-color: url("../../_icons/textDraculaDarkSmall.png");
 }

 .mainDraculaPink {
@ -312,8 +312,8 @@
  --primary-color-hover: #FF86CC;
  --primary-color-active: #E66DB2;
  --text-with-main-color: #F8F8F2;
-  --logo-icon-bar-color: url("~../../_icons/iconDraculaLightSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textDraculaLightSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconDraculaLightSmall.png");
+  --logo-text-bar-color: url("../../_icons/textDraculaLightSmall.png");
 }

 .mainDraculaPurple {
@ -321,8 +321,8 @@
  --primary-color-hover: #C49EFA;
  --primary-color-active: #AA84E0;
  --text-with-main-color: #F8F8F2;
-  --logo-icon-bar-color: url("~../../_icons/iconDraculaLightSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textDraculaLightSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconDraculaLightSmall.png");
+  --logo-text-bar-color: url("../../_icons/textDraculaLightSmall.png");
 }

 .mainDraculaRed {
@ -330,8 +330,8 @@
  --primary-color-hover: #FF6666;
  --primary-color-active: #E64D4D;
  --text-with-main-color: #F8F8F2;
-  --logo-icon-bar-color: url("~../../_icons/iconDraculaLightSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textDraculaLightSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconDraculaLightSmall.png");
+  --logo-text-bar-color: url("../../_icons/textDraculaLightSmall.png");
 }

 .mainDraculaYellow {
@ -339,8 +339,8 @@
  --primary-color-hover: #F2FB98;
  --primary-color-active: #D9E17E;
  --text-with-main-color: #282A36;
-  --logo-icon-bar-color: url("~../../_icons/iconDraculaDarkSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textDraculaDarkSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconDraculaDarkSmall.png");
+  --logo-text-bar-color: url("../../_icons/textDraculaDarkSmall.png");
 }

 .mainCatppuccinMochaRosewater {
@ -348,8 +348,8 @@
  --primary-color-hover: #fceeec;
  --primary-color-active: #e1c8c3;
  --text-with-main-color: #1e1e2e;
-  --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconCatppuccinMochaDarkSmall.png");
+  --logo-text-bar-color: url("../../_icons/textCatppuccinMochaDarkSmall.png");
 }

 .mainCatppuccinMochaFlamingo {
@ -357,8 +357,8 @@
  --primary-color-hover: #f2e1e1;
  --primary-color-active: #ddb7b7;
  --text-with-main-color: #1e1e2e;
-  --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconCatppuccinMochaDarkSmall.png");
+  --logo-text-bar-color: url("../../_icons/textCatppuccinMochaDarkSmall.png");
 }

 .mainCatppuccinMochaPink {
@ -366,8 +366,8 @@
  --primary-color-hover: #f3d2ea;
  --primary-color-active: #dca3cd;
  --text-with-main-color: #1e1e2e;
-  --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconCatppuccinMochaDarkSmall.png");
+  --logo-text-bar-color: url("../../_icons/textCatppuccinMochaDarkSmall.png");
 }

 .mainCatppuccinMochaMauve {
@ -375,8 +375,8 @@
  --primary-color-hover: #d4b7f8;
  --primary-color-active: #b38fdf;
  --text-with-main-color: #1e1e2e;
-  --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconCatppuccinMochaDarkSmall.png");
+  --logo-text-bar-color: url("../../_icons/textCatppuccinMochaDarkSmall.png");
 }

 .mainCatppuccinMochaRed {
@ -384,8 +384,8 @@
  --primary-color-hover: #f0a4b9;
  --primary-color-active: #de7693;
  --text-with-main-color: #1e1e2e;
-  --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconCatppuccinMochaDarkSmall.png");
+  --logo-text-bar-color: url("../../_icons/textCatppuccinMochaDarkSmall.png");
 }

 .mainCatppuccinMochaMaroon {
@ -393,8 +393,8 @@
  --primary-color-hover: #eabbc3;
  --primary-color-active: #d68895;
  --text-with-main-color: #1e1e2e;
-  --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconCatppuccinMochaDarkSmall.png");
+  --logo-text-bar-color: url("../../_icons/textCatppuccinMochaDarkSmall.png");
 }

 .mainCatppuccinMochaPeach {
@ -402,8 +402,8 @@
  --primary-color-hover: #f7c7a9;
  --primary-color-active: #e1996d;
  --text-with-main-color: #1e1e2e;
-  --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconCatppuccinMochaDarkSmall.png");
+  --logo-text-bar-color: url("../../_icons/textCatppuccinMochaDarkSmall.png");
 }

 .mainCatppuccinMochaYellow {
@ -411,8 +411,8 @@
  --primary-color-hover: #feeecd;
  --primary-color-active: #dec48d;
  --text-with-main-color: #1e1e2e;
-  --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconCatppuccinMochaDarkSmall.png");
+  --logo-text-bar-color: url("../../_icons/textCatppuccinMochaDarkSmall.png");
 }

 .mainCatppuccinMochaGreen {
@ -420,8 +420,8 @@
  --primary-color-hover: #bfebbb;
  --primary-color-active: #86c780;
  --text-with-main-color: #1e1e2e;
-  --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconCatppuccinMochaDarkSmall.png");
+  --logo-text-bar-color: url("../../_icons/textCatppuccinMochaDarkSmall.png");
 }

 .mainCatppuccinMochaTeal {
@ -429,8 +429,8 @@
  --primary-color-hover: #aceae0;
  --primary-color-active: #6fc5b7;
  --text-with-main-color: #1e1e2e;
-  --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconCatppuccinMochaDarkSmall.png");
+  --logo-text-bar-color: url("../../_icons/textCatppuccinMochaDarkSmall.png");
 }

 .mainCatppuccinMochaSky {
@ -438,8 +438,8 @@
  --primary-color-hover: #a3e4f0;
  --primary-color-active: #68bcca;
  --text-with-main-color: #1e1e2e;
-  --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconCatppuccinMochaDarkSmall.png");
+  --logo-text-bar-color: url("../../_icons/textCatppuccinMochaDarkSmall.png");
 }

 .mainCatppuccinMochaSapphire {
@ -447,8 +447,8 @@
  --primary-color-hover: #93d1ed;
  --primary-color-active: #59a9cf;
  --text-with-main-color: #1e1e2e;
-  --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconCatppuccinMochaDarkSmall.png");
+  --logo-text-bar-color: url("../../_icons/textCatppuccinMochaDarkSmall.png");
 }

 .mainCatppuccinMochaBlue {
@ -456,8 +456,8 @@
  --primary-color-hover: #a6c8ff;
  --primary-color-active: #6593df;
  --text-with-main-color: #1e1e2e;
-  --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconCatppuccinMochaDarkSmall.png");
+  --logo-text-bar-color: url("../../_icons/textCatppuccinMochaDarkSmall.png");
 }

 .mainCatppuccinMochaLavender {
@ -465,8 +465,8 @@
  --primary-color-hover: #c9d0ff;
  --primary-color-active: #8d98e4;
  --text-with-main-color: #1e1e2e;
-  --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png");
-  --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png");
+  --logo-icon-bar-color: url("../../_icons/iconCatppuccinMochaDarkSmall.png");
+  --logo-text-bar-color: url("../../_icons/textCatppuccinMochaDarkSmall.png");
 }

 .secRed {
--- a/src/renderer/views/About/About.vue
+++ b/src/renderer/views/About/About.vue
@ -6,7 +6,7 @@
      </h1>
      <section class="brand">
        <img
-          src="_icons/logoColor.png"
+          src="../../../../_icons/logoColor.png"
          class="logo"
        >
        <div class="version">
--- a/yarn.lock
+++ b/yarn.lock
@ -2704,20 +2704,18 @@ crypto-random-string@^2.0.0:
  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
  integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==

-css-loader@5.2.6:
-  version "5.2.6"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.2.6.tgz#c3c82ab77fea1f360e587d871a6811f4450cc8d1"
-  integrity sha512-0wyN5vXMQZu6BvjbrPdUJvkCzGEO24HC7IS7nW4llc6BBFC+zwR9CKtYGv63Puzsg10L/o12inMY5/2ByzfD6w==
+css-loader@^6.7.1:
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.7.1.tgz#e98106f154f6e1baf3fc3bc455cb9981c1d5fd2e"
+  integrity sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw==
  dependencies:
    icss-utils "^5.1.0"
-    loader-utils "^2.0.0"
-    postcss "^8.2.15"
+    postcss "^8.4.7"
    postcss-modules-extract-imports "^3.0.0"
    postcss-modules-local-by-default "^4.0.0"
    postcss-modules-scope "^3.0.0"
    postcss-modules-values "^4.0.0"
-    postcss-value-parser "^4.1.0"
-    schema-utils "^3.0.0"
+    postcss-value-parser "^4.2.0"
    semver "^7.3.5"

 css-select@^4.1.3:
@ -3638,14 +3636,6 @@ file-entry-cache@^6.0.1:
  dependencies:
    flat-cache "^3.0.4"

-file-loader@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d"
-  integrity sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==
-  dependencies:
-    loader-utils "^2.0.0"
-    schema-utils "^3.0.0"
-
 filelist@^1.0.1:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/filelist/-/filelist-1.0.4.tgz#f78978a1e944775ff9e62e744424f215e58352b5"
@ -5183,7 +5173,7 @@ mux.js@6.0.1:
    "@babel/runtime" "^7.11.2"
    global "^4.4.0"

-nanoid@^3.3.3:
+nanoid@^3.3.4:
  version "3.3.4"
  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
@ -5647,7 +5637,7 @@ postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
    cssesc "^3.0.0"
    util-deprecate "^1.0.2"

-postcss-value-parser@^4.1.0:
+postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
  version "4.2.0"
  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
@ -5660,12 +5650,12 @@ postcss@^7.0.36:
    picocolors "^0.2.1"
    source-map "^0.6.1"

-postcss@^8.2.15:
-  version "8.4.13"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.13.tgz#7c87bc268e79f7f86524235821dfdf9f73e5d575"
-  integrity sha512-jtL6eTBrza5MPzy8oJLFuUscHDXTV5KcLlqAWHl5q5WYRfnNRGSmOZmOZ1T6Gy7A99mOZfqungmZMpMmCVJ8ZA==
+postcss@^8.4.7:
+  version "8.4.16"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.16.tgz#33a1d675fac39941f5f445db0de4db2b6e01d43c"
+  integrity sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==
  dependencies:
-    nanoid "^3.3.3"
+    nanoid "^3.3.4"
    picocolors "^1.0.0"
    source-map-js "^1.0.2"

@ -6166,7 +6156,7 @@ schema-utils@^2.6.5:
    ajv "^6.12.4"
    ajv-keywords "^3.5.2"

-schema-utils@^3.0.0, schema-utils@^3.1.0, schema-utils@^3.1.1:
+schema-utils@^3.1.0, schema-utils@^3.1.1:
  version "3.1.1"
  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.1.tgz#bc74c4b6b6995c1d88f76a8b77bea7219e0c8281"
  integrity sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==
@ -6939,15 +6929,6 @@ uri-js@^4.2.2:
  dependencies:
    punycode "^2.1.0"

-url-loader@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.1.tgz#28505e905cae158cf07c92ca622d7f237e70a4e2"
-  integrity sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==
-  dependencies:
-    loader-utils "^2.0.0"
-    mime-types "^2.1.27"
-    schema-utils "^3.0.0"
-
 url-parse-lax@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-3.0.0.tgz#16b5cafc07dbe3676c1b1999177823d6503acb0c"