如何在 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 修改的元素的 scope 之外，因此使用modernizr 添加 class 應該不是問題。

然后您可以使用該 class 來選擇要使用的規則：

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

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