Could not collect styles from non-vue-sfc style automatically any more in Server?
JounQin opened this issue · comments
Do you want to request a feature or report a bug?
feature
What is the current behavior?
Styles only included in server will not be collected into server bundle
If the current behavior is a bug, please provide the steps to reproduce.
https://github.com/JounQin/vue-hackernews-2.0/blob/dynamic-style/src/entry-server.js#L20-L21
If we move these codes into app.js, they will be rendered in client.
What is the expected behavior?
Before release of ssr.vuejs.org, the styles will be collected into server also.
https://github.com/JounQin/vue-music/blob/master/src/views/App.vue#L70
https://github.com/JounQin/vue-music/blob/master/src/store/modules/browser.js#L27
Online page: https://vue-music.1stg.me/
If this is a feature request, what is motivation or use case for changing the behavior?
We hope to dynamically include different theme styles without .vue sfc in server not in client, so is there any possible to do that after now?
Please mention other relevant information such as your webpack version, Node.js version and Operating System.
webpack: 2.2.0
Node.js: 7.6.0
OS: macOS sierra
This is expected, the new collection mechanism requires importing the styles inside your bundled code. You can import it in your bundle's app.js instead.
You can import it in your bundle's app.js instead.
This will work because the styles will be included in client, but in server, they will be treated as nothing.
What means if I disable JavaScript feature in browser, the styles will not be included either.
It will be included on the server...
But the part of dynamic import does't work after moving them to app.js.
https://github.com/JounQin/vue-hackernews-2.0/blob/dynamic-style/src/app.js#L9-L10
@JounQin the bundle will now be evaluated only once with runInNewContext: false, and it captures the styles imported during evaluation synchronously. Dynamically imported CSS will resolve after a Promise tick so they will not be collected. I think this is a really niche use case and probably won't be specifically catered for.
@yyx990803 What a pity, then I'm using toString method of css-loader and add style into context._styles as workaround.
https://github.com/JounQin/vue-hackernews-2.0/blob/dynamic-style/src/entry-server.js#L44-L56