frontend-platform
frontend-platform copied to clipboard
openedx
example MFE application does not load styles from index.scss
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.
