scss不解析base64，仅作字符串透传；vs code自动换行、#{}插值引号嵌套、缺失charset=utf-8均会导致浏览器静默失败，需禁用word wrap、避免插值、手动补全charset并检查url完整性。
SCSS不解析Base64，只做字符串透传
SCSS编译器根本不会处理data:image/svg+xml;这类字符串——它既不校验格式，也不转义换行，更不检查charset=utf-8是否缺失。你写的$icon: "data:image/svg+xml;base64,PHN2Zy...";，在编译后就是原样输出到CSS里。一旦中间有换行、空格或引号嵌套，浏览器就静默失败。
VS Code自动换行是头号杀手
复制粘贴Base64时，编辑器开启「Word Wrap」会把长字符串切成多行，导致CSS里出现\n。浏览器看到url("data:image/svg+xml;base64,PHN2Zy\n...直接拒解，DevTools里background-image声明看似存在，但渲染为空白。
- 禁用VS Code的「Word Wrap」（Ctrl+K Ctrl+Z）
- 粘贴前先用在线工具转成单行（如https://base64.guru/converter/encode/svg）
- 不要手动删换行——容易漏掉不可见字符，用正则
\s+全局替换成空格更稳
#{}插值会多套一层引号
写url(#{$icon-close})看起来合理，但SCSS会把它编译成url("data:image/svg+xml;base64,""xxx"")——双引号被转义成两个双引号，整个URL结构损坏。
- 绝对避免对Base64变量用
#{}插值 - 想复用？改用
@include混入 + 注释包裹的纯文本块（见下条） - 若必须动态拼接路径，用
inspect($var)确保变量是字符串类型，再拼接
缺charset=utf-8在Safari里直接白屏
SVG是UTF-8编码的XML文本，不是二进制。漏掉charset=utf-8时，Safari和部分iOS WebView会拒绝解析，且不报错。
- 必须写全：
data:image/svg+xml;charset=utf-8,PHN2Zy...，不能简写为base64, - 别信“在线生成工具默认带charset”——手动检查生成结果，很多工具默认不加
- 用
encodeURIComponent()处理原始SVG源码再拼接，比依赖工具更可控
background-image的URL值是否被截断或含非法字符——这些细节比语法本身更决定成败。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
