Open thomasjm opened 2 years ago
Oh, I just discovered the staticCssInDev: true
option, which resolves the issue.
I guess the question is, could we both have our cake and eat it too? I'd like to have both CSS hot loading and have my CSS extracted into separate CSS files.
If not, would it be possible to automatically apply the staticCssInDev
behavior to CSS files that live in node_modules
?
🐛 Bug report
Current Behavior
Normally I like to debug server-side rendering by disabling Javascript in my browser and loading the page to see how it looks.
Unfortunately, this isn't working with the
examples/with-loadable-components
example when I use CSS modules like Tachyons, because the CSS goes into the mainclient.js
file in some code connected tocss_loader
. Thus, rendering the page without JS enabled doesn't accurately reflect what a server-side render should look like.In production builds on the other hand, we get
<style>
tags inserted into the page.Expected behavior
All CSS should always be inserted into the server-rendered page in a non-JS-requiring way, including in development.
Reproducible example
https://github.com/thomasjm/razzle/tree/loadable-components-css/examples/with-loadable-components
Repro is as follows:
Suggested solution(s)
Perhaps don't use the Webpack CSS loader in development? Not sure what the implications of that would be.