From c66ab852c4b8d463a0a5433be1b63c516894d949 Mon Sep 17 00:00:00 2001
From: Rizwan Mustafa <rizwanmustafa0000@gmail.com>
Date: Sun, 3 Apr 2022 18:34:41 +0500
Subject: [PATCH] Fixed styles not showing up (#2799)

* Fixed styles not showing up

* Removed unused css file
---
 frontend/static/email-handler.html    |  4 +++-
 frontend/static/privacy-policy.html   |  4 +++-
 frontend/static/security-policy.html  |  4 +++-
 frontend/static/terms-of-service.html |  4 +++-
 frontend/webpack/config.base.js       | 22 +++++++++++++++++++++-
 5 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/frontend/static/email-handler.html b/frontend/static/email-handler.html
index 03aa95c33..5ea001b9f 100644
--- a/frontend/static/email-handler.html
+++ b/frontend/static/email-handler.html
@@ -6,7 +6,6 @@
     <title>Email Handler | Monkeytype</title>
     <!-- <link rel="stylesheet" href="css/fa.css" /> -->
     <link rel="stylesheet" href="css/balloon.css" />
-    <link rel="stylesheet" href="css/style.css" />
     <link rel="stylesheet" href="themes/serika_dark.css" id="currentTheme" />
     <link rel="stylesheet" href="" id="funBoxTheme" />
     <link id="favicon" rel="shortcut icon" href="images/fav.png" />
@@ -18,6 +17,9 @@
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     />
+    <% for (var css in htmlWebpackPlugin.files.css) { %>
+    <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[css] %>" />
+    <% } %>
     <meta name="name" content="Monkeytype" />
     <meta name="image" content="https://monkeytype.com/mtsocial.png" />
     <meta
diff --git a/frontend/static/privacy-policy.html b/frontend/static/privacy-policy.html
index e6104a9b7..abc79ff41 100644
--- a/frontend/static/privacy-policy.html
+++ b/frontend/static/privacy-policy.html
@@ -6,11 +6,13 @@
     <title>Privacy Policy | Monkeytype</title>
     <!-- <link rel="stylesheet" href="css/fa.css" /> -->
     <link rel="stylesheet" href="css/balloon.css" />
-    <link rel="stylesheet" href="css/style.css" />
     <link rel="stylesheet" href="themes/serika_dark.css" id="currentTheme" />
     <link rel="stylesheet" href="" id="funBoxTheme" />
     <link id="favicon" rel="shortcut icon" href="images/fav.png" />
     <link rel="shortcut icon" href="images/fav.png" />
+    <% for (var css in htmlWebpackPlugin.files.css) { %>
+    <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[css] %>" />
+    <% } %>
     <meta name="name" content="Monkeytype" />
     <meta name="image" content="https://monkeytype.com/mtsocial.png" />
     <meta
diff --git a/frontend/static/security-policy.html b/frontend/static/security-policy.html
index b2c1e4fc4..396a8d337 100644
--- a/frontend/static/security-policy.html
+++ b/frontend/static/security-policy.html
@@ -6,11 +6,13 @@
     <title>Security Policy | Monkeytype</title>
     <!-- <link rel="stylesheet" href="css/fa.css" /> -->
     <link rel="stylesheet" href="css/balloon.css" />
-    <link rel="stylesheet" href="css/style.css" />
     <link rel="stylesheet" href="themes/serika_dark.css" id="currentTheme" />
     <link rel="stylesheet" href="" id="funBoxTheme" />
     <link id="favicon" rel="shortcut icon" href="images/fav.png" />
     <link rel="shortcut icon" href="images/fav.png" />
+    <% for (var css in htmlWebpackPlugin.files.css) { %>
+    <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[css] %>" />
+    <% } %>
     <meta name="name" content="Monkeytype" />
     <meta name="image" content="https://monkeytype.com/mtsocial.png" />
     <meta
diff --git a/frontend/static/terms-of-service.html b/frontend/static/terms-of-service.html
index f510c4e1d..5f60e5d2d 100644
--- a/frontend/static/terms-of-service.html
+++ b/frontend/static/terms-of-service.html
@@ -6,11 +6,13 @@
     <title>Terms of Service | Monkeytype</title>
     <!-- <link rel="stylesheet" href="css/fa.css" /> -->
     <link rel="stylesheet" href="css/balloon.css" />
-    <link rel="stylesheet" href="css/style.css" />
     <link rel="stylesheet" href="themes/serika_dark.css" id="currentTheme" />
     <link rel="stylesheet" href="" id="funBoxTheme" />
     <link id="favicon" rel="shortcut icon" href="images/fav.png" />
     <link rel="shortcut icon" href="images/fav.png" />
+    <% for (var css in htmlWebpackPlugin.files.css) { %>
+    <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[css] %>" />
+    <% } %>
     <meta name="name" content="Monkeytype" />
     <meta name="image" content="https://monkeytype.com/mtsocial.png" />
     <meta
diff --git a/frontend/webpack/config.base.js b/frontend/webpack/config.base.js
index f4f38547f..48d5b6f34 100644
--- a/frontend/webpack/config.base.js
+++ b/frontend/webpack/config.base.js
@@ -84,7 +84,7 @@ const BASE_CONFIG = {
           from: resolve(__dirname, "../static"),
           to: "./",
           globOptions: {
-            ignore: ["**/index.html"],
+            ignore: ["**/*.html"],
           },
         },
       ],
@@ -94,6 +94,26 @@ const BASE_CONFIG = {
       template: resolve(__dirname, "../static/index.html"),
       inject: "body",
     }),
+    new HtmlWebpackPlugin({
+      filename: "terms-of-service.html",
+      template: resolve(__dirname, "../static/terms-of-service.html"),
+      inject: false,
+    }),
+    new HtmlWebpackPlugin({
+      filename: "security-policy.html",
+      template: resolve(__dirname, "../static/security-policy.html"),
+      inject: false,
+    }),
+    new HtmlWebpackPlugin({
+      filename: "email-handler.html",
+      template: resolve(__dirname, "../static/email-handler.html"),
+      inject: false,
+    }),
+    new HtmlWebpackPlugin({
+      filename: "privacy-policy.html",
+      template: resolve(__dirname, "../static/privacy-policy.html"),
+      inject: false,
+    }),
     new MiniCssExtractPlugin({
       filename: "./css/style.[chunkhash:8].css",
     }),