scss变量无法直接注入svg内联fill，必须通过构建时替换实现：用postcss或脚本读取scss变量值，定位并替换svg字符串中的占位符（如fill="%%accent%%"），确保svg作为字符串参与构建流程，且每个需变色区域为独立并带对应class。
SCSS变量无法直接注入SVG内联fill，必须走构建时替换
SCSS本身不能在编译后把变量值“写进”SVG的fill属性里——因为SVG是静态字符串，SCSS编译器不会解析或重写它内部的fill="#ff0000"这类值。你写的$primary: #3b82f6只作用于CSS规则，对SVG源码里的硬编码颜色完全无效。
真正可行的路径只有一条：在Webpack或Vite构建阶段，用PostCSS、自定义插件或脚本读取SCSS变量值，再定位并替换SVG字符串中的占位符（如fill="%%PRIMARY%%"），最后生成最终SVG内容。这要求SVG必须作为字符串参与构建流程，不能是纯静态资源。
- 导出SVG时，在需要动态填色的位置手动写占位符，比如
fill="%%ACCENT%%"或stroke="%%BORDER%%" - 在
themeInject.js中用fs.readFileSync()读取SVG文件，再用.replace(/%%ACCENT%%/g, primaryColor)批量替换 - 确保替换后的SVG被正确注入HTML（内联）或转为Data URI用于背景，否则CSS仍无法控制
- 避免在SCSS里写
svg { fill: $primary }——这种写法只会给整个<svg></svg>元素设fill，不作用于内部<path></path>
用SCSS map管理多色区，配合JS动态切换主题
当一个SVG有头、身、肢多个区域需独立变色，靠单个$primary变量不够用。这时用SCSS map组织主题色集更清晰，例如：$theme: ("head": #ef4444, "body": #3b82f6, "limb": #10b981)。但map本身不输出CSS，必须配合@each生成对应类名规则：
@each $part, $color in $theme {
.svg-#{$part} {
fill: $color;
}
}
生成的CSS类似.svg-head { fill: #ef4444 }，之后JS只需切换SVG容器的class即可换肤，无需操作内联样式或DOM属性。
- 每个可填色区域的
<path></path>必须加对应class，如<path class="svg-head"></path> - SCSS map要和SVG结构严格对齐，命名错一位就失效
- 若需运行时切换（如用户点按钮换主题），提前编译好所有主题的CSS类，JS只负责
element.classList.replace() - 不要试图用
fill: map-get($theme, head)直接写在SVG标签上——SCSS不支持在HTML模板中执行map操作
为什么不能用CSS变量+SCSS混合？兼容性与作用域卡死
有人想“折中”：SCSS定义--primary: #3b82f6，再让SVG用fill: var(--primary)。这条路走不通——var()是运行时CSS特性，SCSS编译器根本不会处理它；而如果真把var(--primary)写进SVG，又会遇到两个硬伤：
- SVG作为
<img>或background-image加载时，var()完全失效，因为外部SVG无权访问宿主CSS作用域 - 即使内联SVG，
fill: var(--primary)也只在该SVG元素自身计算样式中生效，无法继承:root变量，除非显式声明svg { --primary: ... } - PostCSS插件如
postcss-custom-properties默认不处理SVG内联字符串，需额外配置解析上下文 - 构建时替换比运行时
var()更可靠：没有浏览器兼容问题，打包后CSS体积可控，调试时一眼可见最终颜色值
导出SVG时的关键预处理动作
设计师给的SVG常带冗余属性，直接扔进构建流程会破坏占位符替换逻辑或导致CSS选择器失效。必须在交付前做三件事：
- 用Figma/Illustrator导出时勾选「Expand compound paths」，确保每个色区是独立
<path></path>，而非单个d里挤多个Z指令 - 删掉所有内联
fill、stroke、style属性，只留class或id用于后续选择 - 把需要动态控制的区域统一加前缀class，如
theme-fill-head、theme-stroke-outline，避免和业务class冲突 - 检查
viewBox是否合理，缩放失真会导致CSSfill看起来“偏色”——实际是抗锯齿渲染差异，不是颜色本身问题
最易被忽略的是路径拆分粒度：一个图标若含5个视觉色块，就得导出5个独立<path></path>并配5个占位符，少一个就无法实现真正的多色动态填充。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
