Create-React-App中SASS编译SVG背景图因%3C报错的解决方案咨询

针对你在Create-React-App项目中遇到的Sass编译错误，以下是几种替代%3C（<）和%3E（>）的可行方案：

方案一：直接使用原始<和>字符 #

现代主流浏览器都支持在data:image/svg+xml中直接使用未转义的<和>，只需确保SVG内容被正确包裹在引号内，Sass会将其识别为字符串的一部分，不会触发变量解析错误。修改后的mixin代码如下：

@mixin keyline($color: 'green', $style: 'stroke') {
    $colorcode: colourcode($color);
    @if $style == fill {
        $fill-stroke: "fill='%23#{$colorcode}'";
    }
    @else {
       $fill-stroke: "fill='none' stroke='%23#{$colorcode}'";
    }
    background-image: url("data:image/svg+xml,<svg width='464' height='243' xmlns='http://www.w3.org/2000/svg'><g #{$fill-stroke} fill-rule='evenodd'><path d='M463.409 18.439l-.02 223.245L364.326 130.1l99.084-111.661zM231.847.5c10.354 0 20.063 4.372 26.808 12.006h0l104.333 117.516L263.256 242.5H1.112L205.216 12.505A35.488 35.488 0 01231.847.5z'/></g></svg>");
    background-repeat: no-repeat;
}

方案二：将转义字符定义为变量后插值 #

如果需要保留URL转义格式（比如兼容旧浏览器），可以把%3C和%3E定义为独立变量，通过插值插入到字符串中，避免Sass误解析：

@mixin keyline($color: 'green', $style: 'stroke') {
    $colorcode: colourcode($color);
    @if $style == fill {
        $fill-stroke: "fill='%23#{$colorcode}'";
    }
    @else {
       $fill-stroke: "fill='none' stroke='%23#{$colorcode}'";
    }
    // 定义转义字符变量
    $lt: "%3C";
    $gt: "%3E";
    background-image: url("data:image/svg+xml,#{$lt}svg width='464' height='243' xmlns='http://www.w3.org/2000/svg'#{$gt}#{$lt}g #{$fill-stroke} fill-rule='evenodd'#{$gt}#{$lt}path d='M463.409 18.439l-.02 223.245L364.326 130.1l99.084-111.661zM231.847.5c10.354 0 20.063 4.372 26.808 12.006h0l104.333 117.516L263.256 242.5H1.112L205.216 12.505A35.488 35.488 0 01231.847.5z'/#{$gt}#{$lt}/g#{$gt}#{$lt}/svg#{$gt}");
    background-repeat: no-repeat;
}

方案三：预转义SVG固定部分+动态内容编码 #

先将SVG中固定不变的部分预转义，再对动态的$fill-stroke内容进行URL编码后拼接，适合复杂SVG场景：

@mixin keyline($color: 'green', $style: 'stroke') {
    $colorcode: colourcode($color);
    @if $style == fill {
        $fill-stroke: "fill='%23#{$colorcode}'";
    }
    @else {
       $fill-stroke: "fill='none' stroke='%23#{$colorcode}'";
    }
    // 预转义SVG固定部分，用%s标记动态内容位置
    $svg-base: "%3Csvg width='464' height='243' xmlns='http://www.w3.org/2000/svg'%3E%3Cg %s fill-rule='evenodd'%3E%3Cpath d='M463.409 18.439l-.02 223.245L364.326 130.1l99.084-111.661zM231.847.5c10.354 0 20.063 4.372 26.808 12.006h0l104.333 117.516L263.256 242.5H1.112L205.216 12.505A35.488 35.488 0 01231.847.5z'/%3E%3C/g%3E%3C/svg%3E";
    // 编码动态内容中的特殊字符
    $escaped-fill-stroke: url-encode($fill-stroke);
    // 拼接完整的data URI
    background-image: url("data:image/svg+xml,#{str-slice($svg-base, 1, str-index($svg-base, '%s') - 1)}#{$escaped-fill-stroke}#{str-slice($svg-base, str-index($svg-base, '%s') + 2)}");
    background-repeat: no-repeat;
}

错误原因说明 #

原代码中的%3C和%3E在插值#{$fill-stroke}附近时，Sass会将%开头的片段误判为占位符语法，进而触发"Undefined variable"错误。通过上述方案可以避免这种解析冲突。

内容的提问来源于stack exchange，提问作者MeltingDog