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

4

1 回答 1

0

这有点 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但我认为这不重要吗？

取自这个 SO 答案：https ://stackoverflow.com/a/54586626/895091

于 2019-06-25T14:24:11.723 回答