How to load a CSS file with out generating an extra network request in express / react?

Question

In React I have most of my CSS tied to my modules as follows. Module1.jsx has Module1.css, and so on and so on.

Webpack builds all these modules into a single request via bundle.js.

However, I do have about 40 lines of CSS that I use app wide that does not belong in a single module. In fact some of it targets elements outside of the app, i.e. the body tag.

Currently I have it hard coded in the index.html file which express serves. I could put it in another file and link to it, but his would require another network request.

I would like it in its own file, but then injected into index.html file before it is served.

I'm not sure if webpack can do this, or it can be done via express. But the syntax might look like this:

Instead of this:

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

Maybe ssi for server-side-indlcude and the file to include at that location:

  <ssi file="styles.css">

It just seems in-efficient to send the index.html to the client, and than for the client to request the CSS, when it can just be sent in the initial request.

In general the reasons for this are:

• to clean up index.html and make it more human readable

• to follow a separation of concerns design architecture

Ideas on how to do this:

• using templates ( is this overkill )

• is there a way to implement sever side includes?

• does webpack have a way to insert files into file?

• can express bundles static files?