如何在帶有 Nuxt.js ar 服務器端的 css 中使用 v-bind

Question

我想在我的頁面上使用動態配色方案。 基於 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 的頭部，並且通過服務器端生成，我得到了一個正確着色的服務器渲染頁面。