如果我在 CSS 中使用 SVG 作为背景，Stylelint 会显示 "Unexpected URL scheme "data"

Question

我在 CSS 文件中使用一些 SVG 图像，如下所示：

background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23637581' d='M101.3 141.6v228.9h309.5V141.6H101.3zm274.4 26.2L256 259.3l-119.6-91.5h239.3zm-248.1 26.3l64.1 49.1-64.1 64.1V194.1zm.2 150.1l84.9-84.9 43.2 33.1 43-32.9 84.7 84.7H127.8zm256.6-36.4L320 243.4l64.4-49.3v113.7z'/%3E%3C/svg%3E");

有效。然而 Stylelint 抱怨这个错误：

Unexpected URL scheme "data:"   function-url-scheme-disallowed-list

有谁知道如何修复 URL 以消除 stylelint 错误？

Answer 1

Stylelint 只是抱怨 data 方案，因为它已被配置为通过 function-url-scheme-disallowed-list rule 执行此操作。 URL 没有错，不允许 data 方案纯粹是一种偏好。

official configs 均未启用此规则。您或您正在扩展的第 3 方配置的作者已将其打开并将其配置为禁止 data 方案。

您需要：

找出原因，并使用建议的任何替代方案
关闭规则或将其配置为允许 data 方案

如果我在 CSS 中使用 SVG 作为背景，Stylelint 会显示 "Unexpected URL scheme "data"

Stylelint shows "Unexpected URL scheme "data" if I use SVGs as background in my CSS

stylelint