data-uri函数在Less中需传入本地文件路径字符串，自动按MIME类型选择UTF-8或base64编码内联；不支持变量拼接和网络URL，SVG须为UTF-8无BOM编码，否则解析失败。
data-uri 函数在 Less 中的实际调用方式
Less 的 data-uri 函数不是简单地把路径丢进去就完事，它会自动判断 MIME 类型、编码方式，并内联 base64 或 UTF-8 内容——但前提是路径必须可被 Less 编译器访问到，且文件存在。它不支持网络 URL（如 https://...），只接受相对或绝对本地路径（相对于入口 Less 文件）。
典型写法：
background-image: data-uri("../icons/heart.svg");编译后可能生成 background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg...");（SVG 自动走 UTF-8）或 url("data:image/png;base64,iVBORw0KGgo...")（PNG 走 base64）。
- 路径必须是字符串字面量，不能拼接变量：
data-uri(@icon-path)会报错 - 若文件不存在，Less 编译直接失败，报错类似
File not found: ../icons/heart.svg - 函数返回的是完整
url(...)字符串，无需再套一层url()
SVG 图标为什么有时没生效？UTF-8 编码陷阱
SVG 是文本格式，data-uri 默认对 SVG 使用 UTF-8 编码（不 base64），但前提是文件本身以 UTF-8 无 BOM 存储。一旦图标文件带 BOM 或含非 ASCII 字符（比如中文注释、命名空间里的非标准字符），浏览器解析会失败，背景变空白。
验证方法：用 VS Code 打开 SVG，右下角看编码显示是否为 UTF-8；若有 UTF-8 with BOM，用「另存为」选纯 UTF-8 覆盖。
立即学习“前端免费学习笔记（深入）”；
- 临时绕过：强制 base64 编码，加第二个参数
"base64"：data-uri("../icons/heart.svg", "base64") - 注意：强制 base64 后体积增大 ~33%，小图标（
- 不推荐在 SVG 上加
charset属性（如<?xml encoding="UTF-8"?>），Less 不识别，反而可能干扰解析
与 Webpack / Vite 等构建工具共存时的路径问题
当 Less 文件经 Webpack（less-loader）或 Vite 处理时，data-uri 仍由 Less 引擎执行，**不是**构建工具的 asset 处理逻辑。这意味着：即使你配置了 url-loader 或 assetsInlineLimit，它也完全不影响 data-uri 的行为。
常见冲突场景：项目里同时用了 data-uri("logo.png") 和 background: url("./logo.png")，后者会被 Webpack 当作模块处理并哈希重命名，前者却仍按原始路径读取——结果就是 Less 编译成功，但运行时找不到文件，报 404。
- 解决方案：统一用
data-uri，并确保所有图标路径在 Less 编译时可访问（例如放在src/styles/assets/下，且该目录未被 Webpack 排除） - 避免混用：不要在一个项目中既依赖
data-uri又依赖构建工具的url()处理同一类资源 - Vite 用户注意：
vite-plugin-less默认启用 Less 的data-uri，但若启用了cssCodeSplit，需确认图标文件不在被拆分的动态 CSS 块之外
替代方案对比：什么时候不该用 data-uri？
虽然内联能减少请求数，但 data-uri 并非万能。它无法压缩内容，也不支持缓存分离——图标更新时整个 CSS 都得重新下载。
- 图标 >2KB 时，base64 编码后体积更大，HTTP/2 下多请求优势已不明显，建议改用普通
url()+ 构建工具内联配置 - 需要主题色动态替换的 SVG（通过
fill: currentColor），必须用 UTF-8 编码，且不能含外部引用（如<image xlink:href="..."/>），否则解析失败 - 如果项目已用 icon font 或 SVG sprite，强行改用
data-uri反而增加维护成本，尤其是需要 hover 变色、动画等交互时
真正省事的点在于：单页应用里几个固定小图标（loading、close、check），路径稳定、不常变更、尺寸可控——这时候 data-uri 才算物尽其用。其他情况，先想清楚“到底是不是真要它”。
