如何在 sass 中使用 WebP

Question

在我的 scss 文件中我有：

.banner{
    background-image: url("/images/image.jpg");
}

现在我已将其转换为 WebP 图像。我知道如果它是 html 中的图像，我应该这样做：

<picture>
    <source type="image/webp" srcset="images/image.webp">
    <source type="image/jpeg" srcset="images/image.jpg">
    <img src="images/image.jpg">
</picture>

但是，如何在 sass SCSS 文件中做类似的事情？（我正在使用 Reactjs）

Answer 1

CSS无法检测 webp 支持。

您最有可能实现的是使用 JavaScript 检测支持并向元素添加 class（例如使用 modernizr）。由于 body 元素通常在 React 修改的元素范围之外，因此使用 modernizr 添加 class 应该不是问题。

然后您可以使用 class 选择要使用的规则：

.banner{
    background-image: url("/images/image.jpg");
}

.webp .banner{
    background-image: url("/images/image.webp");
}

如何在 sass 中使用 WebP

How to use WebP in sass

html

css

reactjs

sass

webp