less 的 data-uri() 并非万能，存在编译静默失败、路径必须静态相对、不支持变量和构建别名、svg 易降级、safari 中 content: url(data:) 渲染空白等问题，推荐交由构建工具（如 webpack 的 url-loader 或 vite 的 assetsinlinelimit）统一处理。
data-uri() 函数在 Less 中确实能省掉 HTTP 请求，但**它不是“写了就生效”的万能开关**——编译期静默失败、路径错位、SVG 降级、Safari 渲染空白，才是日常真实状态。
Less 的 data-uri() 路径必须静态且相对当前 .less 文件
它不支持变量拼接、不解析构建时路径别名（如 @/assets）、也不认 Webpack 的 ~ 别名。路径必须是字面量字符串，且以当前 .less 文件为基准计算。
-
data-uri("icons/close.svg")✅ —— 假设icons/与当前 .less 同级 -
data-uri("../images/logo.png")✅ —— 显式向上跳一级再进images/ -
@icon: "icons/close.svg"; data-uri(@icon)❌ —— 变量会被忽略，直接 fallback 成url("") -
data-uri("~@/assets/icon.svg")❌ —— 构建工具别名在 Less 编译阶段尚未介入
SVG 和 PNG 行为差异大，尤其 SVG 容易静默降级
data-uri() 对 SVG 的 MIME 推断和解码非常脆弱，稍有异常就退化为 url()，且不报错。
- 文件必须无 BOM、无 XML 声明（如
<?xml version="1.0"?>）——否则 Base64 解码失败 - 推荐用
svgo预处理：svgo --multipass --precision=1 icon.svg -o icon.min.svg -
.webp、.avif等新格式不被识别，直接 fallback；仅支持.png、.jpg、.gif、.svg - 检查最终 CSS：如果看到
background: url("icon.svg")而非url("data:image/svg+xml;base64,")，说明已静默失败
content: url(data:) 在 Safari 中根本不可靠
这不是编码问题，是 Safari 对伪元素中 content: url(data:) 的实现缺陷——常渲染为空白，控制台零提示。
-
::before { content: url("data:image/svg+xml;base64,"); }→ Safari 下大概率不显示 -
background-image: url("data:image/svg+xml;base64,");→ 所有现代浏览器均正常 - 若需居中/对齐图标，优先用
background-image+background-position+ 固定尺寸容器，而非依赖content - 真要靠
content显示纯图标？改用字体图标或 inline SVG，别碰data-uri()+content
构建层比 Less 层更适合做内联决策
data-uri() 是编译期硬编码，没法按文件大小、目录、环境动态开关。真正可控的方案在构建工具里。
- Webpack 用户：用
url-loader+limit: 4096，自动对 ≤4KB 图片转 Base64，支持所有url()场景（含@import的 CSS） - Vite 用户：写
import icon from './icon.svg?inline'或配置assetsInlineLimit，效果等价，且默认已支持 SVG - Less 中只需写语义化路径：
.icon-home { background-image: url("./icons/home.svg"); }，无需任何 Base64 手动操作
data-uri("x.svg") 很可能已经编译成 url("x.svg") 了，而你根本没察觉——因为没有错误提示，也没有 warning。检查生成的 CSS 才是唯一验证方式。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
