fix: styles not loading issue

[Syed-Ali-Abbas-Zaidi]

Ticket
example MFE application does not load styles from index.scss

Description:
This PR fixes the issue related to styles not being loaded.

Screenshots

[codecov]

Codecov Report

All modified lines are covered by tests ✅

Comparison is base (b47e2a7) 83.22% compared to head (285cb9e) 83.22%.

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #461   +/-   ##
=======================================
  Coverage   83.22%   83.22%           
=======================================
  Files          40       40           
  Lines        1073     1073           
  Branches      197      197           
=======================================
  Hits          893      893           
  Misses        168      168           
  Partials       12       12           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[abdullahwaheed]

please attach the ticket in the description and fixed UIs screenshots as well

[adamstankiewicz]

The dynamic import here makes the CSS get dynamically loaded at runtime, resulting in a Flash Of Unstyled Content (FOUC).

It also doesn't explain why import './index.scss'; doesn't work given that's how all MFEs and other example apps in our JS library repos import it without an issue, e.g. frontend-component-footer (source).

[Syed-Ali-Abbas-Zaidi]

I have looked into this issue and was not able to figure out why import './index.scss'; is not working. Webpack config and version all the things are exactly similar to the ones used in header/footer.

However while doing RnD on this issue, I found this comment in webpack.dev.config that "We don't care about FOUC in development". As this dynamic import is being used in the example app, in my opinion we can ignore this issue for now. What do you suggest?