Application-level CSS classes are not exposed in styles.scss of remote applications

[martijnvt1981]

Current Behavior

• I have setup a MFE for Angular applications, using the tutorial I found on https://nx.dev/recipes/module-federation/faster-builds;
• Whenever I load the host-application and the remote applications using the --devRemotes flag, I am unable to see the effect of CSS classes put into the styles.scss files of the remote applications.
• The same goes for importing libraries in styles.scss files of these applications. They do not seem to be picked up.

I have tested this using the latest version of "create-nx-workspace", in combination with the latest version of @nx/angular.

Expected Behavior

I expect to be able to use CSS classes in the styles.scss of the remote application and I expect to be able to see the results of these classes in the HTML of said application.

GitHub Repo

No response

Steps to Reproduce

Use the instructions as found on https://nx.dev/recipes/module-federation/faster-builds

1. Replace acme with desired scope
   npx create-nx-workspace acme --preset=empty
   cd acme
2. npm install --save-dev @nx/angular
3. Use 'nx migrate latest' to make sure everything is up-to-date
4. nx g @nx/angular:host host --remotes="shop,cart,about"
5. nx serve host --open --devRemotes="shop,cart"
6. Add a CSS class to styles.scss of the Cart remote application and use that class in the HTML of the entry component of said application.
7. You will see that the CSS class will not be used after reloading

Nx Report

Node   : 18.15.0                                         
   OS     : win32-x64                                       
   npm    : 9.5.0                                           
                                                            
   nx (global)        : 16.3.2                              
   nx                 : 16.4.3
   @nx/js             : 16.4.3
   @nx/jest           : 16.4.3
   @nx/linter         : 16.4.3
   @nx/workspace      : 16.4.3
   @nx/angular        : 16.4.3
   @nx/cypress        : 16.4.3
   @nx/devkit         : 16.4.3
   @nx/eslint-plugin  : 16.4.3
   @nrwl/tao          : 16.4.3
   @nx/web            : 16.4.3
   @nx/webpack        : 16.4.3
   typescript         : 5.1.6

Failure Logs

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[Coly010]

Hi @martijnvt1981!

This is expected behaviour as it is a limitation from Module Federation.

With Module Federation, your full application is not shared as a remote, ONLY the Javascript files that complete the exposes property in your module-federation.config.js.

This means that other files such as global styles, favicon.ico, assets etc are not shared and downloaded by your host application so they are not available to apply to remote components.

If you use styleUrls or styles in your @Component then those styles will be included as they are included in the JS output for the component.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.