scss本身不转换svg，仅原样输出base64字符串；常见编译后图标不显示的原因是编辑器折行、缺失charset=utf-8或#{}插值导致额外引号。
直接说结论：SCSS本身不转换SVG，它只负责把写死的Base64字符串原样输出到CSS里；真正出错的地方90%是字符串被编辑器折行、漏了charset=utf-8、或用了#{}插值导致额外引号。
为什么SCSS里写Base64容易“编译后图标不显示”
SCSS不是构建工具，@import或$icon: "data:image/svg+xml;..."只是文本替换。浏览器看到的是最终CSS里的url("data:image/svg+xml;...")——只要这个字符串中间有换行、空格、或缺charset=utf-8，就会静默失败（尤其Safari和旧Chrome）。
常见现象包括：background-image声明生效但渲染空白、DevTools里Network面板看不到请求但元素检查器里url(...)被截断、VS Code高亮突然变红但没报错。
- 编辑器自动开启「Word Wrap」，把长Base64切成多行 → CSS里出现
\n，浏览器拒绝解析 - 直接复制在线工具生成的Base64粘进
$icon-close: "data:image/svg+xml;base64,xxx"→ VS Code或SCSS编译器把双引号内换行当语法错误或忽略 - 用
#{$icon-close}拼接 → SCSS会给整个字符串再套一层引号，变成url("data:image/svg+xml;base64,""xxx"")
正确写法：用注释包裹 + 显式声明charset
最稳的方式是绕过SCSS变量解析，让Base64纯文本“躺平”在CSS输出流里：
/* ↓ 把整段Base64放在这里，前后用注释包住 */
.icon-close {
background-image: url("data:image/svg+xml;charset=utf-8,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==");
}
关键点：
-
charset=utf-8不能省——SVG是UTF-8文本，不是二进制，缺它Safari直接白屏 - 不要用
base64,开头就写内容，必须完整写成data:image/svg+xml;charset=utf-8,... - 注释包裹能防止SCSS解析器误读特殊字符（比如
{、;），也避免编辑器对长字符串做语法高亮干扰
想用变量管理？必须抽离+禁用自动换行
如果项目图标多，需要统一维护，推荐建一个_base64-icons.scss文件，只放变量定义，且确保编辑器关闭Word Wrap：
// _base64-icons.scss $icon-close: "data:image/svg+xml;charset=utf-8,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg=="; $icon-loading: "data:image/svg+xml;charset=utf-8,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==";
然后在主文件中引用：
@use "base64-icons";
.icon-close {
background-image: url(#{$base64-icons.$icon-close});
}
注意：
- 必须用
#{$var}插值，不能直接写url($icon-close)（SCSS会把它当普通字符串，不展开） - 变量值里仍要带
charset=utf-8，不能指望url()自动补 - HBuilderX或老版VS Code打开这个文件时可能卡顿——不是代码问题，是编辑器对超长单行字符串处理慢，忍一忍或切到纯文本模式
别依赖构建工具自动内联SVG
Webpack的url-loader或Vite的asset/inline确实能自动把小图转Base64，但控制粒度太粗：
- 它按文件大小阈值（如
limit: 4096）统一处理，可能把12KB的用户头像也打进CSS，体积暴涨 - 无法区分SVG和PNG，更没法强制加
charset=utf-8 - 调试困难：你改了SVG源文件，得等构建重新跑一遍才能看到效果
更可控的做法是：用脚本（Node/Python）批量读取/assets/icons/下所有SVG，压缩（svgo）、URL编码（%3C代替）、Base64，最后生成上面那种<code>_base64-icons.scss。这样每次图标更新，运行一次脚本即可，CSS体积可控，兼容性明确。
真正麻烦的从来不是“怎么转”，而是“怎么让那一长串字符安安静静躺在CSS里不被编辑器和编译器动一根手指头”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
