How to export @angular/material styles from a user lib(NX) to the nx with MFA workspace apps

Question

I have created an Angular Micro Frontends with Dynamic Module Federation by following the official documentation.

I use the following command to create the workspace:

npx create-nx-workspace demo-app --preset=empty

npm install --save-dev @nrwl/angular

nx g @nrwl/angular:host host-app --dynamic

nx g @nrwl/angular:remote remote-app --host=host-app --port=4201

And, I also created a custom-lib using the below command:

nx generate @nrwl/angular:library custom-lib --directory=libs --buildable --publishable --importPath=@monorepo/my-custom-lib

After all, you can see the folder structure below:

apps/
  - host-app/
    - src/
        - styles.scss
    - project.json
    ...
  - remote-app/
    - src/
        - styles.scss
    - project.json
  ...
libs/
  - custom-lib/
    - src/
        - lib/
            - components/
                - header-component/
            - custom-lib.module.ts
        - index.ts
    - package.json
      ...
  - themes/
    - mat-styles.scss
package.json
nx.json
...

Furthermore, I have installed @angular/material in custom-lib and kept @angular/material in peerDependencies in libs/custom-lib/package.json to create custom components and created a HeaderComponent using @angular/material.

I have installed @angular/material in the custom-lib(not in the host/remote app) and imported/exported material modules.

I am trying to export/reuse the @angular/material styles in the apps(host or remote) For that I have followed the below steps:

1. I have imported indigo-pink.css in libs/themes/mat-styles.scss file.

   libs/themes/mat-styles.scss

   @import './styles//variables';
   @import '~@angular/material/prebuilt-themes/indigo-pink.css'; <-- IMPORTED
   
   span {
     font-weight: 400;
     font-size: 1.125rem;
     line-height: 1.75rem;
   }
   
   

2. I have updated project.json configuration in apps/host-app/project.json file.

   ...
   "targets": {
     "build": {
       "executor": "@nrwl/angular:webpack-browser",
       "outputs": ["{options.outputPath}"],
       "options": {
         ...
         "inlineStyleLanguage": "scss",
         "assets": [
           "apps/host-app/src/favicon.ico",
           "apps/host-app/src/assets",
         ],
         "stylePreprocessorOptions": {
           "includePaths": ["libs/themes"] <-- INCLUDED GLOBAL STYLES
         },
         "styles": ["apps/host-app/src/styles.scss"],
         "scripts": [],
         "customWebpackConfig": {
           "path": "apps/host-app/webpack.config.js"
         }
       },
     },
   }
   

3. Next, I have imported the mat-styles.scss into apps/host-app/src/styles.scss file.

   @import 'mat-styles.scss';
   

4. I also added <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> in apps/host-app/src/index.html file.

5. Here is the problem, I am getting the following errors:

   ./apps/host-app/src/styles.scss - Error: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
   Error: Can't resolve '~@angular/material/prebuilt-themes/indigo-pink.css' in '/Users/IAM/Movies/demo-app/apps/host-app/src'
   
   ./apps/host-app/src/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
   HookWebpackError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
   Error: Can't resolve '~@angular/material/prebuilt-themes/indigo-pink.css' in '/Users/IAM/Movies/demo-app/apps/host-app/src'
   

   NOTE: in case if I remove/comment @import '~@angular/material/prebuilt-themes/indigo-pink.css'; in mat-styles.scss then I can able to export normal styles(span and any other normal styles that I create) into apps.

So, only thing is that I can not export @angular/material styles from libs to apps. How can I export/reuse these styles in apps?

Thanks and any help appreciated!