Description

The example app within this repo is defined in the example folder. It acts as an example micro-frontend (MFE). The entry point for the example app (i.e., example/index.jsx) imports a index.scss file. This SCSS file currently imports SCSS from @edx/paragon and @edx/brand.

However, when running the example app on master (i.e., npm start runs app on localhost:8080), no styles are applied to the MFE in the browser:

Even adding the following to example/index.scss produces no results, even though it does seem to trigger a hot reload of the application:

body { background-color: red !important; }

Other MFEs (e.g., frontend-app-profile) injects inline <style> tags into the HTML <head> for the styles defined in the MFE:

Whereas the example MFE in this repo does not. It only includes the JS bundle and no inline <style> tags.

Impacts

The impact of this issue is that it's not possible to run the example app properly to QA styles when testing a new approach for loading external theme CSS.