openedx / openedx/frontend-platform

example MFE application does not load styles from index.scss

Open
#441 0 comments 0 reactions 1 assignee View on GitHub

Nobody has claimed this yet.

awaiting prioritization
Dominant language
JavaScript
Stars
39
Forks
91
Avg merge
2m
Merged PRs (30d)
1

Description

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:

image

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:

image

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

image

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.