Path in CSS url() ignore child MFE publicPath and resolve to host MFE instead

[malay44]

Bug Report

Describe the bug When using Webpack in a micro-frontend (MFE) setup, url() references inside CSS for fonts (e.g. @font-face { src: url(...) }) are incorrectly resolving to the shell MFE's publicPath, instead of the mfe-1 MFE's. Other assets like JS chunks and images imported in JS resolve correctly.

To Reproduce

1. Clone this repo: https://github.com/manfredsteyer/module-federation-plugin-example.git

• Create a duplicate of angular.png in assets folder and rename it as angular-2.png
• Reference that image

  .bg-angular {
      width: 300px;
      height: 300px;
      background-image: url('../../../assets/angular-2.png');
      background-size: cover;
      background-position: center;
   }
  

• Build the child and integrate it into a host MFE.
• Load the application in the browser.
• OR apply this changes.patch on the repo and create a duplicate image

Expected behavior Image should resolve from the child MFE’s asset path (e.g. http://localhost:3000/assets/angular-2.png).

Actual behavior Image resolve from the host MFE’s asset path (e.g. http://localhost:5000/assets/angular-2.png), resulting in 404s.

I understand this may not be the ideal place to raise the issue, but any guidance or suggestions would be greatly appreciated.

[ScriptedAlchemy]

Use url loader and check the options available for it. Or ask codex or Claude code.