Webpack 提取CSS以用于SSR（Vue.js）

我有一个vue.js应用程序，它与webpack捆绑在一起。我使用

vue服务器渲染器

在服务器端进行渲染。那里一切都很好。在我的网页配置中，我正在使用

ExtractTextPlugin

：

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

如果我使用

allChunks:true

，那么我会得到一个css文件，一切正常。但在一个大的应用程序中，这并不理想。现在我有一堆CSS，它们被加载了，但没有在页面上使用

如果我设置了

allChunks:false

，那么我会得到一个较小的初始文件，当前组件的css将在页面加载时注入头部。这几乎就是我想要的。但是这里的问题是，如果您使用的是SSR，那么您将在没有CSS的情况下获得页面中的初始HTML，然后当CSS加载时，所有内容都将正确呈现

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

我曾尝试构建一个网页包加载器，但我认为这是不对的，我在与

css加载器集成时遇到了问题

我认为这应该是
vue加载程序
或
vue服务器渲染器
的问题。我真的不知道从这里到哪里去。因此，我想我正在寻找一些指导，是否有其他人知道这一点，或者可以为我指出正确的方向。
这有点不太靠谱（IMO），但我最近在客户端做了类似的事情，我需要用Vuex存储中的颜色值替换：hover CSS（你可能知道，伪选择器不能单独用JS更改）. 

您可以创建一个组件，用JavaScript值直接在Vue中设置样式，或者在您的情况下，您可以用从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:悬停{
颜色：{{colors.hover}
}

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

摘自下面的答案：
也许你能帮助我。看看这个：