SSR context.renderStyles() returns empty string

Version

2.4.1

Reproduction link

http://plnkr.co/edit/Gtp3uFFiBIxYMmyh3Se9

Steps to reproduce

webpack config rules : {test: /.css$/, loader: “vue-style-loader!css-loader”}

<script>
import './common.css';
export default {
	name: 'app',
};
</script>
<template src="./app.html"></template>

context has _styles property but context.renderStyles() returns empty string why is it? client side works fine. I don’t know what I missed. please help.

有context._styles，不过context.renderStyles()的结果是“” 为什么？ 浏览器上是正常添加STYLE。 不知道错过了什么，求解

What is expected?

context.renderStyles() => “<style>body {…}</style>”

What is actually happening?

context.renderStyles() => “”

[yyx990803]

Ok, so I looked at your setup and it’s because in here you are using extends: app so essentially your app component is also the root component. The SSR CSS is injected in each component’s beforeCreate hook, however you created the root instance before the render starts, so the injected CSS never got registered.

What you need to do is make the root component a wrapper:

// from this
app: new Vue({router, extends: app, store})

// to this
app: new Vue({router, store, render: h => h(app) })

[Elevista]

@yyx990803 Thank you very very much ❤️ work like a charm You’re the king god maestro emperor code meister! Vue.js forever xD