NodeJS 由于无法识别“%3C”，SASS无法将SVG编译为背景图像,附近有工作吗？

2w3kk1z5 于 2023-10-17 发布在 Node.js

关注(0)|答案(1)|浏览(109)

I'm compiling SASS in a Create-React-App project on a MacOS environment, with Node.js.
I'm running into an issue where my project fails to compile due to the UTF-8 characters %3C and %3E (representing < and > ), eg in the CSS rule:

background-image: url("data:image/svg+xml,%3Csvg...svg%3E");

Would anyone know if there's an alternative to using %3C and %3E when placing the SVG source code in a .scss file?
EDIT:
Error I'm getting in Storybook:
SassError: Undefined variable. node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].oneOf[7].use[4]!./src/styles/components/components.scss undefined
274 │background-image: url("data:image/svg+xml,%3Csvg width='464' height='243' xmlns='http://www.w3.org/2000/svg'%3E%3Cg #{$fill-stroke} 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"); │
^^^^^^^^^^^^
src/styles/mixins/_svgs.scss 274:123 keyline()
The SCSS in question is a mixin (you could hard-code the variables to test):

@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,%3Csvg width='464' height='243' xmlns='http://www.w3.org/2000/svg'%3E%3Cg #{$fill-stroke} 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");
    background-repeat: no-repeat;
}

node.js

来源：https://stackoverflow.com/questions/77269456/sass-is-failing-to-compile-svgs-as-background-images-due-to-not-recognising-3c

1条答案

按热度按时间

rryofs0p1#

注意错误的SassError: Undefined variable部分：SVG data-uri中有... #{$fill-stroke} ...，keyline mixin不能替换$fill-stroke，因为当它尝试这样做时，该变量（不再）存在。
在上面的例子中，将mixin更改为：

@mixin keyline($color: 'green', $style: 'stroke') {
    $colorcode: colourcode($color);
    $fill-stroke: "fill='none' stroke='%23#{$colorcode}'";
    @if $style == fill {
        $fill-stroke: "fill='%23#{$colorcode}'";
    }
    background-image: url("data:image/svg+xml,%3Csvg...#{$fill-stroke}...%3C/svg%3E");
    background-repeat: no-repeat;
}

赞(0）回复(0）举报 2023-10-17

我来回答

NodeJS 由于无法识别“%3C”，SASS无法将SVG编译为背景图像,附近有工作吗？

1条答案

相关问题

热门标签

最新问答