How to use single-spa-css in a root-config?

[PieterBoeren]

I was looking into the single-spa-css solution (I was trying to extract my css with webpacks "MiniCssExtractPlugin"), it all works, but the CSS isn't loaded since a root-config doesn't have the lifecycles to hook in to. Any suggestions on how to extract (and load) my CSS in a root-config?

[joeldenning]

In root configs, you can load CSS via <link rel="stylesheet" href="/file.css"> inside of your index.html file. You don't need to use single-spa-css in root configs since it can control the ordering of loading css files (as the owner of the html file)

[PieterBoeren]

Except that there is no index.html ;) Sure, I can put it in the index.ejs file, but only if the filename of the css is a constant (so no "[contenthash]" or whatever). Any suggestions on how to get a "dynamic" css file (extracted via the "MiniCssExtractPlugin") inside that .ejs file?

[joeldenning]

Your correction of me related to ejs / html files was annoying and incorrect, and wasn't saved by the winky face. It is possible to have either an index.ejs or an index.html file when using html-webpack-plugin.

You can insert the URL for css files, including content hashes, into the index.ejs / index.html file by using EJS template syntax as described in https://github.com/jantimon/html-webpack-plugin#writing-your-own-templates.

<% htmlWebpackPlugin.files.css.forEach(function (cssFile) { %>
  <link rel="stylesheet" href="<%= cssFile %>">
<% }) %>

[PieterBoeren]

I'm sorry you were offended by my comment, that was certainly not my intention!

Thanks for the answer, I didn't really realize that the .ejs file wasn't a single-spa specific solution.