scss中svg-uri函数失效主因是未转义svg字符串中的双引号、换行、空格及#等符号，需手动删声明、压空格、转义字符，并确保xmlns属性存在；其不支持css变量，动态变色须改用运行时或构建时方案。
SCSS里用 svg-uri 函数生成 background-image 会失效？
直接写 background-image: svg-uri('<svg>...</svg>'); 很可能不显示——不是函数没生效，而是生成的 Data URI 字符串里混入了未转义的双引号、换行或空格，导致整个 url() 值被浏览器静默丢弃。SCSS 的 svg-uri 是纯字符串拼接函数，不做任何 HTML 或 URL 编码，它只负责加前缀 data:image/svg+xml;utf8,，其余全靠你手动清理。
常见静默失败现象：
-
background-image在开发者工具中显示为none或空值 - CSS 文件本身语法报错（比如未闭合引号），但被忽略后整条规则失效
- SVG 显示为全黑/全白，其实是
fill被解析成无效值（如fill="currentColor"没生效，退回到默认 black）
必须手动精简并转义 SVG 内容再喂给 svg-uri
不能把原始 .svg 文件内容原样复制进 svg-uri()。需三步处理：删声明、压空格、转符号。否则即使编译通过，运行时也会崩。
- 删掉第一行
<?xml version="1.0" encoding="UTF-8"?>—— 它在 Data URI 中非但无用，还会让某些浏览器拒绝解析 - 确保
<svg></svg>标签带xmlns="http://www.w3.org/2000/svg"属性，否则 Safari 可能不渲染 - 把所有换行和多余空格压缩成单个空格；
> 之间不能有空白（即 <code>> → <code>>） - 双引号
"全部替换成单引号'（更安全），或用%22编码；#必须编码为%23，否则会被当 fragment 截断 - 如果 SVG 含
<style></style>，建议删掉，改用内联fill/stroke，否则样式可能被外部 CSS 层叠覆盖
想用 CSS 变量控制 fill？svg-uri 不行，得换方案
svg-uri 是构建时函数，输出的是静态字符串。一旦编译完成，里面的 fill="var(--primary)" 就只是普通文本，不会被浏览器当作 CSS 变量解析——它根本不在样式作用域里。
- 若需动态变色，必须放弃
svg-uri，改用前端运行时方案：fetch + 字符串替换 +encodeURIComponent拼 Data URI - 或者走构建时替换：用 PostCSS 插件读取 SCSS 变量值，提前把
fill="%%PRIMARY%%"这类占位符替换成真实颜色值，再喂给svg-uri - 别在 SCSS 里写
svg { fill: $primary }试图影响 Data URI 里的图形——那只会给页面中真实的<svg></svg>元素设样式，对背景图零作用
路径和文件引用方式比函数更重要
很多人卡在第一步：以为 svg-uri 能读文件，其实不能。它只接受字符串字面量。所以你得自己把 SVG 内容抄进来，或用构建工具注入。
- 不要写
svg-uri('../icons/arrow.svg')—— 这只是把那段文字当字符串传进去，不是读文件 - 推荐做法：用 Webpack/Vite 的
raw-loader或svgr把 SVG 当模块引入，再传给自定义 SCSS 函数（需配合插件） - 如果硬要手写，建议把 SVG 存成 SCSS 变量：
$icon-arrow: '<svg xmlns="..." ...></svg>';，再调用svg-uri($icon-arrow)，便于复用和搜索 - 注意：SCSS 变量里的 SVG 字符串仍要满足前述转义规则，否则变量一展开就炸
svg-uri()，而是怎么让那一长串字符在 UTF-8、URL 编码、CSS 解析、浏览器渲染四层关卡里全程不被截断、不被误解析、不悄悄变成空白。稍有空格或引号漏处理，就只能靠 Network 面板看请求是否发出去、靠 computed 样式确认值是否落地。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
