Shopify样式表Assets路径引用问题：CSS引用、liquid文件及link标签

1. 如何在CSS中引用Assets路径？ #

只有带.liquid后缀的CSS文件（比如style.css.liquid）才能使用Liquid过滤器生成正确的Assets路径，核心是用asset_url过滤器，示例代码如下：

/* 引用Assets根目录下的背景图 */
.banner {
  background-image: url('{{ 'banner-bg.jpg' | asset_url }}');
}

/* 引用Assets子目录下的图标文件 */
.nav-icon {
  background-image: url('{{ 'icons/menu.svg' | asset_url }}');
}

注意：要确保目标文件已经上传到Shopify后台的「内容>文件」板块（Assets目录对应此处的文件存储）。

2. 是否仍可使用style.css.liquid文件？ #

可以，Shopify至今完全支持.css.liquid格式的样式文件，这类文件允许在CSS代码中嵌入Liquid语法（过滤器、变量等），适合动态生成样式资源路径或个性化样式内容。当前主流主题虽更倾向于用常规CSS文件配合Liquid模板加载，但旧的.css.liquid写法不存在兼容性问题，不会被禁用。

3. 如何创建link标签加载样式文件？ #

在Shopify的Liquid模板文件（比如theme.liquid的<head>区域）中，有两种常用方式创建link标签：

• 使用Shopify内置stylesheet标签（推荐，自动处理缓存和路径优化）：

{% stylesheet 'style.css' %}

• 手动编写link标签：

<link rel="stylesheet" href="{{ 'style.css' | asset_url }}" media="all">

如果要加载.css.liquid文件，直接替换文件名即可，比如{{ 'style.css.liquid' | asset_url }}，Shopify会自动解析文件中的Liquid语法并输出正确的CSS内容。

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