Make webpack configuration support scss, fonts and images

Signed-off-by: Iku-turso <mikko.aspiala@gmail.com>

packages/infrastructure/webpack/package.json

@@ -27,8 +27,10 @@
     "css-loader": "^6.7.2",
     "fork-ts-checker-webpack-plugin": "^7.3.0",
     "mini-css-extract-plugin": "^2.7.3",
+    "sass": "^1.58.2",
     "sass-loader": "^13.2.0",
     "style-loader": "^3.3.1",
+    "tailwindcss": "^3.2.4",
     "ts-loader": "^9.4.1",
     "webpack": "^5.76.0",
     "webpack-cli": "^4.10.0",

packages/infrastructure/webpack/src/get-react-config.js

@@ -1,5 +1,9 @@
 const getNodeConfig = require("./get-node-config");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require("path");
+
+// hack: hard-coded
+const sassCommonVars = "/Users/maspiala/work/lens/packages/core/src/renderer";
 
 module.exports =
   ({ miniCssExtractPluginLoader = MiniCssExtractPlugin.loader } = {}) =>
@@ -46,14 +50,44 @@ module.exports =
                 },
               },
 
+              {
+                loader: "postcss-loader",
+                options: {
+                  sourceMap: false,
+                  postcssOptions: {
+                    plugins: ["tailwindcss"],
+                  },
+                },
+              },
+
               {
                 loader: "sass-loader",
                 options: {
                   sourceMap: false,
+                  additionalData: `@import "${path.basename(sassCommonVars)}";`,
+
+                  sassOptions: {
+                    includePaths: [path.dirname(sassCommonVars)],
+                  },
                 },
               },
             ],
           },
+
+          {
+            test: /\.(ttf|eot|woff2?)$/,
+            type: "asset/resource",
+          },
+
+          {
+            test: /\.svg$/,
+            type: "asset/source", // exports the source code of the asset, so we get XML
+          },
+
+          {
+            test: /\.(jpg|png|ico)$/,
+            type: "asset/resource", // path to file, e.g. "/static/build/assets/*"
+          },
         ],
       },
     };