I used the same requirejs-text plugin that I used for the html templates but for the css an inject it as a
That way, when I bundle all my files into 1, I already bundled the css (as text) and inject it immediatly when I needed, and the code that is executed after it already has the style applied. Take a look at the solution.
How I got to that solution
I first used the require-css plugin:
This would do the job, but when I wanted to bundle all the css and js files into 1 big file with this code:
In this case, when I bundled everything, the css weren’t bundled as well, so I needed to wait for the css to arrive to execute the dependant code. It makes sense but I want the css to be bundled too so the execution of that code is instant.
So the way i did that was using the same requirejs-text plugin that I used for the html templates, but for the css.
The only disadvantage that I see it that I will bundle all the css with the rest of the app when perhaps I won’t use them all. But I don’t mind adding 0.5 kb to the file to improve the UX of the app.
This isn’t really rocket science but in production I didn’t want to wait for external css to be loaded when the rest of the app is already in the client. So I found these easy and simple solution to it.
By the way, I was using grunt for all these, I know webpack has this already built-in but I didn’t have the chance to use it.
That’s it, thanks!