CSS中使用SVG作为背景时Stylelint报data URL scheme错误如何解决

架构老林

2026-9-23

报错原因

该报错由Stylelint的function-url-scheme-disallowed-list规则触发，说明你当前项目的Stylelint配置里，把data:协议加入了禁止使用的URL协议列表，因此检测到data URI形式的SVG引用时会抛出错误。

解决方法

你可以根据项目规范选择以下任意一种方案处理：

方案1：调整全局Stylelint规则
如果你所在项目允许使用data URI格式的静态资源，找到项目根目录下的Stylelint配置文件（通常为.stylelintrc、stylelint.config.js等），修改对应规则：

{
  "rules": {
    // 方法1：直接将data从禁用协议列表中移除
    // 原规则类似 "function-url-scheme-disallowed-list": ["data", "ftp"]，修改为
    "function-url-scheme-disallowed-list": ["ftp"],
    
    // 方法2：如果要保留其他协议的禁用规则，仅允许图片类的data协议，可以配置例外
    "function-url-scheme-disallowed-list": [
      ["data"],
      {
        "ignore": ["data:image"]
      }
    ]
  }
}

方案2：单行走内忽略规则
如果你不想修改全局规则，仅需要跳过当前这行代码的检查，可以在对应CSS代码上方加忽略注释：

/* stylelint-disable-next-line function-url-scheme-disallowed-list */
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");

方案3：将SVG单独存为文件引用
如果项目规范明确禁止使用data URI，你可以把这段SVG代码单独存为一个.svg文件（比如mail-icon.svg），然后在CSS中引用该文件的本地路径即可：
```
background-image: url("./icons/mail-icon.svg");
```