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

【问题标题】：Extract CSS for use in SSR (Vue.js)提取 CSS 以用于 SSR (Vue.js)
【发布时间】：2017-05-25 13:38:57
【问题描述】：

我有一个 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 的问题。不太确定从这里去哪里。所以我想我正在寻找一些指导，有没有其他人知道这一点，或者可以指出我正确的方向。

【问题讨论】：

【解决方案1】：

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

您可以创建一个组件，直接在 Vue 中使用 JavaScript 值设置样式，或者在您的情况下，您可以将 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 中，但我认为这不重要吗？

【讨论】：