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然后你在页面中没有CSS得到初始HTML，那么当CSS加载一切都被正确呈现。

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

我曾尝试构建一个webpack加载器，但我认为这是对的，我在与css-loader集成时遇到了问题。

我认为它应该是vue-loader或vue-server-renderer的问题。不确定从哪里开始。所以我想我正在寻找一些指导，让其他人想出来，或者可以指出我正确的方向。

Answer 1

这有点骇人听闻（IMO），但是我最近在客户端做了类似的操作，需要用Vuex存储中的颜色值替换a：hover CSS（因为您可能知道伪选择器不能用JS）。

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

在您的JavaScript文件中声明Vue：

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中，但我不认为这应该重要吗？