Skip to content

example MFE application does not load styles from index.scss #441

Open
@adamstankiewicz

Description

@adamstankiewicz

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.

Metadata

Metadata

Labels

awaiting prioritizationbugReport of or fix for something that isn't working as intended

Type

No type

Projects

Status

Backlog

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions