Generating and using CSS bundle(s) instead of inlined styles via js

[Xoadra]

Is this at all a possibility? I know that Webpack can bundle and output separate CSS files via the ExtractTextWebpackPlugin, but I have had trouble with getting this to work so that my styles are properly scoped.

When I run my app for example, my server-side bundle doesn't like it when I use this plugin on it. As a result, I get a NodeInvocationException: Expected 'styles' to be an array of strings. error. A hacky workaround I found is by inserting the to-string-loader inside an array that concatenates the output of the plugin's extract method. This however does not resolve the core issue, as with or without the plugin used for the server bundle, I'm still not successful at generating a css bundle that properly scopes my styles to their respective components. My best results got me either overridden styles, or correctly working styles that caused page reloads upon switching routes (what an SPA shouldn't be doing). The plugin had no issues working with client-side bundles, but the core css scoping and/or page reload issues remain.

One possibility that came to mind was by trying to use the link service to apply the reference to my output stylesheet instead of hardcoding the tag into my html. This could be a possibility too, as I recall I still got the Expected 'styles' to be an array of strings. error when my app did successfully boot up, but it was instead in my console, referencing my server-side vendor bundle. Even if this would work, I don't know how I would implement that using this repo's link service.

Should I even be doing it this way? I understand both this repo and the CLI's starter app both rely on adding style tags to the html instead of generating css files to reference, but I had also read that larger sites are better off with referencing css stylesheets for better performance.

[inunotaisho]

I couldn't agree with @Xoadra more.

[RZeni]

You are absolutely right that css bundles should be built and loaded separately. While the plugin being used to build our css inline (extract-text-webpack-plugin) can be setup to build separate bundles, it is outdated as of webpack 4. Their own site directs you to use mini-css-extract-plugin instead stating that the plugin will extract CSS into separate files. It creates a CSS file per JS file which contains CSS. So your styles are no longer inlined into the JS bundle, but in a separate CSS files. The files are loaded in parallel with the rest of the site so it should load faster overall as well.

After my most recent PR is accepted i will incorporate this change as well.