能否通过SCSS变量将背景URL从路径切换为Shopify的ASSET_URL格式？

要解决这个问题，我们可以利用SCSS的**函数（Function）或混合宏（Mixin）**来提取原路径中的文件名，并自动替换为Shopify要求的asset_url格式，无需手动逐个修改每一条背景图规则。

方法1：使用SCSS函数处理路径转换 #

先定义一个自定义函数，它会自动从原相对路径中提取文件名，然后生成Shopify的Liquid语法：

// 定义生成asset_url的函数
@function asset-bg($original-path) {
  // 从原路径中提取最后一个"/"之后的文件名（比如从"../img/Interface/Icon.svg"得到"Icon.svg"）
  $filename: str-slice($original-path, str-index($original-path, '/', -1) + 1);
  // 返回Shopify要求的背景图格式
  @return url({{ '#{$filename}' | asset_url }});
}

接下来，把你原有代码中的background: url(...)替换成调用这个函数：

// 原来的写法
#old-selector {
  background: url(../img/Interface/Icon.svg);
}

// 替换后的写法
#new-selector {
  background: asset-bg('../img/Interface/Icon.svg');
}

编译后会自动输出符合Shopify要求的代码：

#new-selector {
  background: url({{ 'Icon.svg' | asset_url }});
}

方法2：使用混合宏（Mixin）批量处理 #

如果你需要同时设置多个背景相关属性（比如背景位置、重复方式），用混合宏会更灵活：

@mixin bg-asset($original-path, $position: center, $repeat: no-repeat) {
  $filename: str-slice($original-path, str-index($original-path, '/', -1) + 1);
  background: url({{ '#{$filename}' | asset_url }}) $position $repeat;
}

使用方式：

#selector {
  @include bg-asset('../img/Interface/Icon.svg', top left, repeat-x);
}

关键注意事项 #

• 文件名唯一性：因为所有图片都放在Assets根目录，确保不同原路径下的图片文件名不重复，否则会出现覆盖问题。
• 大小写敏感：Shopify的Assets文件夹对文件名大小写敏感，要保证提取的文件名和实际Assets中的文件完全一致（比如Icon.svg和icon.svg会被视为两个不同文件）。
• SCSS版本支持：str-slice和str-index是SCSS 3.3+的原生函数，如果你使用的Slate环境SCSS版本较低，可能需要手动实现简单的字符串截取逻辑（或者升级SCSS版本）。

这样一来，你就能在保留原有路径写法习惯的同时，自动适配Shopify的asset_url要求，大大减少手动修改的工作量！

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