Shopify CSS 变量不输出到 Shopify 主题前端

Question

我在使用我创建的颜色变量时遇到问题，因为当我在 CSS 文件中使用该变量时，它不会是 output。 作为参考，我使用 Shopify Dawn 主题作为我的基础。

我尝试使用的 base.css 文件中的代码是：

.noise__background-color-1 {
  background-color: var(--color-custom-global-1)
}

theme.liquid 中定义的变量：

:root{
 --color-custom-global-1: {{ settings.colors_global-custom-1 }}
}

设置架构 object

      {
        "type": "color",
        "id": "colors_global-custom-1",
        "default": "#e2ebf5",
        "label": "Custom color 1",
        "info": "This color can be used globally"
      },

使用 the.noise__background-color-1 class 时，我无法将其设置为 output 可变颜色。 如果我将它更改为 static 颜色，例如 #efedea，它可以正常工作，这告诉我其他一切都已正确设置并正常工作。 这似乎是我面临的 CSS 问题，我无法解决。

Answer 1

弄清楚这一行之后只是缺少一个分号

--color-custom-global-1: {{ settings.colors_global-custom-1 }}

固定版本

--color-custom-global-1: {{ settings.colors_global-custom-1 }};