data-uri()函数仅在Less编译期读取静态图片文件并Base64编码，不处理已生成CSS；路径须为字面量、文件必须存在且格式合规，否则静默降级为url()，Safari中content:url(data:)渲染空白。
data-uri() 函数根本不会去“读取 CSS 文件中的内容”——它只在 Less 编译阶段，尝试读取你传入的**静态文件路径所指向的图片资源**，然后做 Base64 编码。如果你误以为它能解析已编译好的 CSS、或从 url() 值里反向提取图片再编码，那它确实什么也干不了。
data-uri() 只在 Less 编译期工作，不处理已生成的 CSS
Less 是预处理器，data-uri() 是它的内置函数，只在 lessc 或构建工具（如 Webpack 的 less-loader）运行时起作用。一旦编译成 CSS，函数就消失了，剩下的只是纯文本 url("data:...") 或降级的 url("icon.png")。浏览器加载 CSS 时，完全不知道也不关心这行是不是曾经经过 data-uri() 处理。
- ✅ 正确用法：
background: data-uri("icons/check.svg");→ 编译时读取 SVG 文件并内联 - ❌ 错误期待：
background: url("icons/check.svg");→ 再想用 JS 或其他方式“让 Less 回头去读这个 url”？不可能 - ❌ 无效操作：把编译后的
style.css丢给 Less.js 在浏览器里二次处理？data-uri()函数在运行时不存在，也不会被识别
为什么你看到的 CSS 里还是 url("xxx.png")？
这不是 Less “读取失败”，而是它**静默 fallback**了。只要满足以下任一条件，data-uri() 就放弃 Base64，原样输出 url(...)，且不报错：
- 路径不是字面量字符串（用了变量、拼接、别名，例如
@path: "icons/x.svg"; data-uri(@path)） - 文件在编译时不存在（路径写错、大小写不符、没提交到 Git、构建目录结构不同）
- 文件格式不受支持（
.webp、.avif、带 BOM 的.svg、含<?xml ...?>声明的 SVG） - 文件过大（Less 默认限制约 32KB，超限自动 fallback；可通过
--math=always或插件调整，但不推荐）
检查最终生成的 CSS —— 如果看到的是 url("icons/close.svg") 而不是 url("data:image/svg+xml;base64,...")，说明上面某条已触发。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
Safari 中 content: url(data:) 渲染为空白，和 Less 无关
这是渲染引擎层面的问题：content: url(data:...) 在 Safari 对伪元素（::before/::after）的支持存在已知缺陷，即使 Base64 编码完全正确、CSS 已生效，也可能渲染成空白，且控制台零提示。
- ✅ 安全用法：
background-image: data-uri("icon.svg");+width/height/padding控制尺寸 - ❌ 高风险用法：
::before { content: url(data:image/svg+xml;base64,...); }→ 在 Safari 下大概率不可见 - ⚠️ 注意：CSP 策略也必须放行
img-src 'self' data:，否则连 background-image 都会被拦截
真正容易被忽略的点是：你无法靠“看 Less 源码有没有写错”来判断 data-uri() 是否生效——必须盯住最终输出的 CSS 文件内容，再结合浏览器网络面板确认是否真发出了图片请求。静默 fallback 是常态，不是异常。
