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

apps/web/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/web/src/scss/tailwind.css

@@ -1,9 +1,8 @@
+@import "../../../../libs/components/src/tw-theme.css";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@import "../../../../libs/components/src/tw-theme.css";
-
 /*
  * Web specific global styling.
  *

apps/web/webpack.config.js

@@ -49,7 +49,13 @@ const moduleRules = [
         loader: MiniCssExtractPlugin.loader,
       },
       "css-loader",
-      "sass-loader",
+      "resolve-url-loader",
+      {
+        loader: "sass-loader",
+        options: {
+          sourceMap: true,
+        },
+      },
     ],
   },
   {
@@ -59,7 +65,13 @@ const moduleRules = [
         loader: MiniCssExtractPlugin.loader,
       },
       "css-loader",
-      "postcss-loader",
+      "resolve-url-loader",
+      {
+        loader: "postcss-loader",
+        options: {
+          sourceMap: true,
+        },
+      },
     ],
   },
   {