css.liquid文件中Liquid输出失效问题求助

问题原因 #

你用asset_url这类方式引入独立的css.liquid文件时，该文件会被当作静态资源处理，无法直接访问Shopify的settings对象。而在<body>内输出变量能正常显示，是因为页面主体的Liquid代码是在服务器端完整解析的，不受静态资源的限制。

解决方案 #

方案1：内联渲染CSS片段

把css.liquid的内容直接通过Liquid标签嵌入到<style>中，让页面渲染时同步解析变量：

<!-- 在theme.liquid的<head>标签内添加 -->
<style>
  {% render 'css' %}
</style>

这里的css是你的css.liquid片段文件名（无需加.liquid后缀）。

方案2：使用{% stylesheet %}标签

Shopify的{% stylesheet %}标签专门用于处理需要解析Liquid变量的CSS代码，你可以直接在标签内写CSS内容，或者引入片段：

<!-- 方式1：直接写内容 -->
{% stylesheet %}
:root {
  --color-1: rgba({{ settings.color_scheme.settings.color1.rgba }});
  --color-2: rgba({{ settings.color_scheme.settings.color2.rgba }});
  ...
}
{% endstylesheet %}

<!-- 方式2：引入片段 -->
{% stylesheet %}
  {% render 'css' %}
{% endstylesheet %}

注意事项

• 确认settings.color_scheme.settings.color1.rgba的变量路径完全正确（你已经在<body>验证过，这一步可以跳过）；
• 不要用{{ 'css.liquid' | asset_url | stylesheet_tag }}这类静态资源引入方式，这种方式下Liquid变量不会被解析。

内容的提问来源于stack exchange，提问作者test test