Server Side Render does not adds the css renderToString
Version
3.2.33
Reproduction link
Steps to reproduce
yarn
yarn build
node index.mjs
What is expected?
<h1 class="banner">Hello Jane Doe</h1>
<style> .banner { color: red; } </style>
What is actually happening?
<h1 class="banner">Hello Jane Doe</h1>
It should render the css also along with the html
Your generated code does inject the CSS into the <head> at runtime, which it does for HMR, and only because you built without NODE_ENV=production, in other words - this is a development behavior, not production behavior.
- Build with NODE_ENV=production
- which will build an individual .css file in /dist
- which will be included in the HTML file
- So all CSS styles are loaded from this file
If you want to generate critical CSS, that's outside of the scope of Vue core.
Yes, but I do not want the external CSS to be generated. As I will have dynamic parameters for some styles e.g. color prop can be red, green, etc.
So I want renderToString from vue/server-renderer to give me the generated CSS also along with the HTML.
React.js does the same thing it gives the generated CSS when you render the code Server Side
hey so how did you solve the problem? i have the same problem. if HTML can not with CSS, i think @vue/server-renderer is useless for me.
I used svelte and its compiler worked perfectly for my use case.
fine thanks