提取CSS以用于SSR(Vue.js)

Question

我有一个vue.js应用程序,它与webpack捆绑在一起.我用vue-server-renderer它来在服务器端渲染它.那里的一切都很棒.在我的webpack配置中,我正在使用ExtractTextPlugin:

new ExtractTextPlugin({
  filename: `css/[name]${isProduction ? '.[hash]' : ''}.css`,
  allChunks: true
})

如果我使用allChunks: true然后我得到一个单一的CSS文件一切正常.但是在一个不太理想的大型应用程序中.现在我有一堆加载但没有在页面上使用的CSS.

如果我设置allChunks: false然后我得到一个较小的初始文件,并且当前组件的css在页面加载时被注入头部.这几乎是我想要的.但问题是如果您使用SSR然后在页面中获得初始HTML而没有CSS,那么当CSS加载时,所有内容都会被正确呈现.

我想要的是在我的SSR渲染功能期间,我可以访问当前页面的CSS并在返回浏览器之前将其自己注入头部.

我试图建立一个webpack加载器,但我不认为这是正确的,我遇到了问题css-loader.

我觉得应该是有问题vue-loader或vue-server-renderer.不确定从哪里开始.所以我想我正在寻找一些指导,有其他人想出这个,或者可以指出我正确的方向.

Answer 1

这有点 hacky（IMO），但我最近在客户端做了类似的事情，我需要用 Vuex 存储中的颜色值替换 a:hover CSS（正如你可能知道伪选择器不能单独用 JS 更改）。

您可以创建一个使用 JavaScript 值直接在 Vue 中设置样式的组件，或者在您的情况下，您可以将 CSS 替换为从 ExtractTextPlugin 中提取的内容。

在声明 Vue 的 JavaScript 文件中：

Vue.component('v-style', {
  render: function (createElement) {
    return createElement('style', this.$slots.default)
  }
})

在 Vue 组件中：

<v-style>
  a:hover {
    color: {{ colors.hover }}
  }
</v-style>

我想这会在服务器端呈现 find，但我还没有尝试过。我假设您可以a:hover用您的样式声明替换上述代码的一部分。它不会出现head，但我认为这不重要吗？