[CL-349] Allow @apply styles to be used in CL css (#13414)

apps/desktop/postcss.config.js

@@ -1,4 +1,9 @@
 /* eslint-disable @typescript-eslint/no-require-imports, no-undef */
 module.exports = {
-  plugins: [require("tailwindcss"), require("autoprefixer"), require("postcss-nested")],
+  plugins: [
+    require("postcss-import"),
+    require("postcss-nested"),
+    require("tailwindcss"),
+    require("autoprefixer"),
+  ],
 };

apps/desktop/src/scss/tailwind.css

@@ -1,5 +1,5 @@
+@import "../../../../libs/components/src/tw-theme.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@import "../../../../libs/components/src/tw-theme.css";

apps/desktop/webpack.renderer.js

@@ -121,7 +121,13 @@ const renderer = {
             loader: MiniCssExtractPlugin.loader,
           },
           "css-loader",
-          "postcss-loader",
+          "resolve-url-loader",
+          {
+            loader: "postcss-loader",
+            options: {
+              sourceMap: true,
+            },
+          },
         ],
       },
       {
@@ -134,7 +140,13 @@ const renderer = {
             },
           },
           "css-loader",
-          "sass-loader",
+          "resolve-url-loader",
+          {
+            loader: "sass-loader",
+            options: {
+              sourceMap: true,
+            },
+          },
         ],
       },
       // Hide System.import warnings. ref: https://github.com/angular/angular/issues/21560