提取 CSS 以用于 s-s-r (Vue.js)

Posted 2023-02-22

【中文标题】提取 CSS 以用于 s-s-r (Vue.js)

【英文标题】：Extract CSS for use in s-s-r (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 会在页面加载时注入头部。这几乎是我想要的。但是这里的问题是，如果您使用的是 s-s-r，那么您会在没有 CSS 的情况下在页面中获得初始 html，然后当 CSS 加载时，所有内容都会正确呈现。

我想要的是在我的 s-s-r 渲染功能期间，我可以访问当前页面的 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 中，但我认为这不重要吗？

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

【讨论】：

也许你可以帮助我。看看这个：***.com/questions/59524595/…