Question

如何在 Nuxt.js 和服务器端使用 css 中的 v-bind

2022-11-17

1093

javascript css vue.js nuxt.js server-side-rendering

我希望我的页面具有动态配色方案。根据 URL，我发送一个 API 请求，从数据库获取配色方案。

为此，我在 nuxtServerInit 存储钩子中获取颜色。然后我在 CSS 中使用 v-bind() 来动态地为组件着色。

供参考， https://vuejs.org/api/sfc-css-features.html#css-modules 。例如：

#main-container {
      max-width: 500px;
      margin: auto;
      background-color: v-bind('designTemplate.backgroundColor');
    }

这里，designTemplate 是一个计算变量，它从存储中获取值。

我正在使用 SSG。检查生成的文件时，我发现颜色未绑定到 css，并且服务器呈现的页面没有所需的颜色。

在生成的文件中，我看到

.class-name[data-v-15114cda]{background-color:var(--fec1f67e)

但在文件中找不到 css 变量 fec1f7e。只有在水合过程中才会实际应用颜色。

Answer 1

更新：解决了问题。使用另一种方法满足了我的要求。

我没有使用 css 中的 v-bind，而是创建了根级 css 变量。这是在我的页面的头部完成的。

head() {
 return {
   style: [
        {
          cssText: `
            :root {
              --base-color: ${this.designTemplate.baseColor};
              --background-color: ${this.designTemplate.backgroundColor};
            }
          `,
          type: 'text/css'
        }
      ]
   }
}

有了这个，我可以在所有文件中访问这些变量并将它们设置为：

#main-container {
      max-width: 500px;
      margin: auto;
      background-color: v-bind('designTemplate.backgroundColor');
    }

css 变量被注入到 html 的头部，通过服务器端生成，我得到了正确着色的服务器渲染页面。