SCSS变量无法注入SVG内联fill值，因编译器仅处理CSS规则而不解析SVG字符串；可行方案为构建时替换、内联SVG+CSS变量、svg-uri编译期插值。
SCSS 变量无法直接注入 SVG 的 fill 属性值——编译器只处理 CSS 规则，不解析或重写 SVG 字符串里的硬编码颜色。你写的 $primary: #3b82f6 对 <path fill="#000"></path> 完全无效。真正在项目中能落地的方案，只有构建时替换、内联 + CSS 变量、或 svg-uri 编译期插值这三条路径，且各自有明确适用边界。
为什么 SCSS 变量不能穿透到 SVG 内联 fill 中
SCSS 是 CSS 预处理器，它在构建阶段把 @mixin、@function、变量等转成纯 CSS 字符串，不触碰 HTML 或 SVG 源码内容。当你在 SCSS 里写：
$accent: #ef4444;
.icon { fill: $accent; }
这只会影响 DOM 中匹配 .icon 的元素（比如 <svg class="icon"></svg>），但不会修改其内部 <path fill="#000"></path> 的属性值。常见错误现象包括：
- 改了
$accent，SVG 图标颜色完全不变 - 导出的 SVG 文件里带
fill="#333"，SCSS 编译后依然原样保留 - 用
svg-uri()封装时，颜色写死在字符串里，后续无法通过 CSS 变量覆盖
构建时替换：适合需要多主题/深色模式的中大型项目
核心是让 SVG 作为字符串参与构建流程，在 Webpack/Vite 插件或自定义脚本中读取 SCSS 变量值，再批量替换占位符（如 fill="%%ACCENT%%"）。这要求：
- SVG 必须以字符串形式被 JS 读取（不能是静态
<img src="icon.svg" alt="如何在SCSS中处理SVG图标颜色_通过变量注入实现动态CSS填色" >） - 每个需独立填色的
<path></path>加 class 并删掉原始fill属性，或保留占位符如fill="%%HEAD%%" - 用
fs.readFileSync()+.replace(/%%HEAD%%/g, $headColor)批量注入 - 替换后的 SVG 必须内联进 HTML 或转为 Data URI，否则 CSS 无法控制子路径
注意：%%ACCENT%% 这类占位符不能用 $accent 直接写，因为 SCSS 不会把它当变量展开；必须靠构建脚本从外部源（如 JSON 配置或 SCSS 导出的 CSS 变量表）读取真实值。
立即学习“前端免费学习笔记（深入）”；
内联 SVG + CSS 自定义属性：最轻量、可维护性最强的方案
把 SVG 直接写进 HTML（或用 JS 注入 innerHTML），再通过 fill: var(--icon-fill) 控制，是目前兼容性最好、调试最直观的方式。关键点：
- 删掉所有路径上的内联
fill和stroke，例如把<path fill="#000"></path>改成<path></path> - 在祖先元素上定义变量：
<div class="btn" style="--icon-fill: #2563eb;"><svg>...</svg></div> - CSS 写：
.btn svg path { fill: var(--icon-fill, currentColor); }，提供降级 - 多色区域用不同变量：
.head { fill: var(--color-head); }+<path class="head"></path>
⚠️ 不要只在 :root 定义 --icon-fill 就指望全局生效——变量作用域由声明位置决定，.btn 里没显式设置，就继承不到。
用 svg-uri + SCSS 变量插值：仅限小图标集（≤5 个）
svg-uri() 是 Sass 函数，把 SVG 字符串编译成 data URI，适合背景图场景。但它会把颜色“冻结”在 CSS 文件里，所以必须把变量提前插进去：
@function icon-check($fill: currentColor) {
@return svg-uri('<svg viewBox="0 0 16 16"><path fill="#{$fill}" d="..." /></svg>');
}
.icon-check { background: icon-check(var(--color-success)); }
这样生成的 background 值里，fill 已是 var(--color-success) 字符串，而非具体颜色值，仍可被运行时 CSS 变量接管。但要注意：
- 若 SVG 含双引号、
、<code>>等字符，必须手动 URL 编码（如用encodeURIComponent处理后再粘贴） - 超过 10 个图标时，CSS 体积膨胀明显，且无法被浏览器缓存
- 伪元素（
::before）中使用时，无法响应父元素的color变化，得靠变量显式传入
真正容易被忽略的是：SVG 不是图片，它是 DOM。想让它变色，就得按 DOM 的规则来——删内联属性、查计算样式、确认作用域。任何试图绕过这步、幻想“写个变量自动透进去”的做法，都会在上线前夜卡住。
