Styling microfrontend layout in single-spa root-config

Question

I am trying to use CSS grid to arrange the layout for a single-spa application and running into some issues with how to actually apply the styles to the root-config app. My microfrontend-layout.html file is set up to display different single-spa parcel applications like so:

<single-spa-router>
    <main>
        <route default>
          <h3>This is the default route</h3>
          <div class="main">
            <application name="@angular-app/angular-project"></application>
            <application name="@vue-app/vue-project"></application>
          </div>
        </route>
    </main>
</single-spa-router>

I tried creating a css file in the src directory and linking it through index.ejs, but that approach returns a 404 for the css file in the Network tab of DevTools (http://localhost:9000/src/styles.css).

Here is the link element I added to the head of the index.ejs file:

<link rel="stylesheet" href="./styles.css">

UPDATE

I figured out that if I create a utility application with create-single-spa, I can import a css file into the root js file there. However, there is another error occurring which is breaking the app. The error in the browser console says that it cannot load the root-config app. If I remove the utility app from the import maps, the error goes away and the microfrontends load normally.

Answer 1

import style.css file in your microfrontend-root-config.ts

// microfrontend-root-config.ts

import "./style.css"; // Import the global CSS file

it will be work fine