scss中写base64图片需确保字符串不被转义、换行或截断，正确格式为url("data:image/png;base64,...")，svg须加charset=utf-8，推荐用注释包裹或独立变量文件管理，禁用插值拼接与构建工具自动内联。
SCSS里怎么写Base64图片才不被编译掉
SCSS本身不处理Base64编码，它只是把url("data:image/png;base64,...")原样输出到CSS里——所以关键不是“SCSS怎么编码”，而是“怎么让字符串不被转义、不被换行、不被截断”。常见错误是直接把长Base64粘进$icon-close: "data:image/png;base64,iVBOR...";，结果VS Code自动折行，编译后CSS里出现换行符，浏览器静默失败。
正确做法：
• 用//注释包裹Base64字符串（避免被SCSS解析器误读）
• 或者把Base64存在单独的.scss变量文件里，用@import引入，且关闭编辑器的「Word Wrap」
• 不要用#{}插值拼接Base64，SCSS会额外加引号或转义
SVG Base64在SCSS中要特别注意charset
SVG不是二进制文件，它是文本，所以不能简单套用image/svg+xml;base64。漏掉charset=utf-8会导致Safari或旧版Chrome解码失败，图标空白。
必须写成：
• background-image: url("data:image/svg+xml;charset=utf-8,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==");
• 不能写成data:image/svg+xml;base64,...（缺charset）
• 更不能把SVG先gzip再Base64（SCSS和浏览器都不支持）
• 推荐先用svgo压缩SVG，再手动URL编码特殊字符（如→<code>%3C），最后Base64——比纯Base64更小、更稳
构建时自动内联 vs 手动维护变量的取舍
Webpack/Vite的url-loader或asset/inline会把小图自动转Base64，但容易失控：比如你只想要图标，结果连avatar.jpg（12KB）也被打了进来，CSS体积暴涨。
更可控的做法：
• 在SCSS里定义$icons: (close: "...", loading: "...");这样的map
• 用map-get($icons, close)调用，避免重复写url()
• 构建前用脚本批量生成这个map（比如Node读取/assets/icons/下所有SVG，输出SCSS变量）
• 禁用构建工具对SCSS里url()的自动处理（设置url: false in css-loader）
uni-app或HBuilderX里SCSS嵌Base64的卡顿问题
HBuilderX对超长Base64字符串语法高亮和补全极慢，不是代码错，是编辑器性能瓶颈。把整段Base64塞进background-image声明里，编辑时可能假死。
绕过方法：
• 把Base64字符串抽到@use导入的base64-icons.scss中，主样式只写background-image: url($icon-close);
• 不要在@for循环里动态拼Base64（SCSS编译器会尝试解析每一段，加剧卡顿）
• 避免在@keyframes动画里用Base64背景图——某些小程序平台会直接忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
