提取CSS以在SSR中使用（Vue.js）

Question

5

我有一个使用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，则会在页面中获取没有CSS的初始HTML，然后当CSS加载时，所有内容会正确呈现。

我希望在我的SSR渲染函数中，我可以访问当前页面的CSS，并在返回给浏览器之前将其注入到头部。

我尝试构建webpack加载器，但我认为这不是正确的方法，并且我在与css-loader集成方面遇到了问题。

我认为这应该是vue-loader或vue-server-renderer的问题。不太确定接下来该怎么做。所以我想寻求一些指导，是否有其他人解决了这个问题，或者可以指引我走向正确的方向。

- smitt04

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bergy · Answer 1

这有点 hacky（我个人认为），但最近我在客户端上做了类似的事情，我需要用 Vuex 存储中的颜色值替换 a:hover CSS（正如您所知道的，伪选择器不能仅通过 JS 更改）。

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

在声明 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>

我想这在服务器端应该能正常渲染，但我还没有尝试过。我认为你可以用你的样式声明替换上面代码中的a:hover部分。它不会在head中，但我不认为这会有影响？