如何从SASS中的外部文件夹加载图像作为背景图像

Question

我有一个场景，我的所有图像都将从第三方云库加载，而不是从我的本地根文件夹加载，有什么方法可以在SASS中配置该路径并将其设置为背景图像的URL吗？

这是我目前拥有的：$placeholder image:url('../../img/test.png'(；

但是img文件夹在给定的路径上不可用，它应该仍然能够加载图像。有人能帮忙吗？

Answer 1

我不确定是否要重写相对路径——这需要某种SCSS解析器插件。如果您能够控制样式表，那么可能会付出更多的努力。

更简单地说，您可以设置一个变量，即图像所在位置的URL，然后将其插入到图像的路径中，所有这些都在一个函数中以方便使用。

像这样：

$bg-image-url: 'https://image-server.com/';
@function bgImageUrl($path) {
@return url('#{$bg-image-url}#{$path}');
}
.element {
background-image: bgImageUrl('test.png');
}

编译为：

.element {
background-image: url("https://image-server.com/test.png");
}