data-uri()函数需用单引号写路径（如'data-uri("images/icon.png")'），路径须相对于编译入口文件，仅支持.png、.gif、.jpg、.jpeg、.svg；多参数形式data-uri('mimetype', 'path')可自定义编码与mime类型。
data-uri函数在Less里怎么写才不报错
Less的data-uri()函数不是万能图片处理器，它只支持特定格式且要求路径可访问。如果编译时报Cannot resolve data-uri，大概率是路径不对或图片格式不被支持（比如WebP在旧版Less中直接忽略）。
实际用法必须带文件扩展名，且路径相对于Less编译入口文件（不是当前.less文件）：
.icon {
background-image: data-uri('images/icon.png');
}
- 路径不能是绝对URL（
data-uri('https://...')会失败） - 不加引号或用双引号都行，但推荐单引号避免转义问题
- 如果图片在子目录，确保相对路径从主入口.less算起，不是从当前文件
哪些图片格式能用data-uri，哪些会静默失效
data-uri()默认只处理.png、.gif、.jpg、.jpeg和.svg（注意：SVG需以<svg>开头且无BOM）。其他格式如<code>.webp、.avif不会报错，但会跳过并回退到普通URL引用——这容易让你误以为“内嵌成功”了，其实没生效。
- SVG内嵌时，Less会自动添加
charset=utf-8和正确的MIME类型 - PNG/JPG/GIF默认用
base64编码；SVG默认用URI编码（更短），除非显式加base64参数 - 若想强制base64编码SVG，写成
data-uri('image/svg+xml;base64', 'icons/close.svg')
如何控制data-uri的编码方式和MIME类型
默认行为不够灵活时，可以用双参数形式：data-uri([mimetype], path)。第一个参数是字符串，指定完整MIME类型，第二个是路径。这个写法绕过Less的自动检测，适合自定义类型或规避格式误判。
.logo {
// 强制SVG base64，避免某些CDN对URI编码的解析问题
background-image: data-uri('image/svg+xml;base64', 'logo.svg');
// 手动指定PNG MIME（虽然和默认一样，但更明确）
background-image: data-uri('image/png', 'btn-bg.png');
}
- 第一个参数必须是合法MIME字符串，拼错（如
image/jpg）会导致编译失败 - 路径仍需存在且可读，否则报
File not found - 不传第一个参数时，Less根据扩展名推断；传了就完全按你写的来，不再校验文件内容
内嵌大图会导致CSS体积暴涨，怎么合理规避
超过10KB的图片走data-uri()会让CSS文件明显变大，影响首屏加载。Less本身不提供大小判断，得靠构建流程或人工约定。
- 建议把
data-uri()仅用于小图标（≤2KB）、loading spinner这类确定不会变大的资源 - 如果图片来自设计稿导出，提前用脚本检查尺寸，超限就改用常规
url() - Webpack用户可在
less-loader配置里加math: 2（启用严格模式），配合自定义函数做运行时拦截，但这已超出Less原生能力范围
真正容易被忽略的是：内嵌后图片失去浏览器缓存独立性，每次CSS更新都会让所有内嵌图片重新下载——哪怕那张PNG一个月都没变过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
