Início / coding / Perguntas / 77269456
Accepted
MeltingDog
Asked: 2023-10-11 07:20:46 +0800 CST

O SASS não está conseguindo compilar SVGs como imagens de fundo por não reconhecer `%3C`. Existe uma solução alternativa?

  • 772

Estou compilando o SASS em um projeto Create-React-App em um ambiente MacOS, com Node.js.

Estou enfrentando um problema em que meu projeto não consegue compilar devido aos caracteres UTF-8 %3Ce %3E(representando <and >), por exemplo, na regra CSS:

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

Alguém saberia se existe uma alternativa para usar %3Ce %3Eao colocar o código fonte SVG em um arquivo .scss?

EDITAR:

Erro que estou recebendo no Storybook:

SassError: variável indefinida. 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 indefinido

274 │imagem de fundo: 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.006 h0l104,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 linha-chave()

O SCSS em questão é um mixin (você pode codificar as variáveis ​​para testar):

@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;
}
css

2 respostas

  1. Best Answer

    Observe a SassError: Undefined variableparte do erro: o SVG data-uri contém ... #{$fill-stroke} ...e o keylinemixin não pode substituí-lo $fill-strokeporque, no momento em que tenta fazê-lo, essa variável (não existe mais).

    Com o exemplo acima, altere o mixin para:

    @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;
}
    • 1

  2. Não há nada de errado com o compilador SASS, seu código SASS é compilado com sucesso.

    Executando:

    echo '.foo {background-image: url("data:image/svg+xml,%3Csvg width='464' height='243' xmlns='http://www.w3.org/2000/svg'%3E%3Cg #123456 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");}' | sass --stdin

    Dá:

    .foo {
  background-image: url("data:image/svg+xml,%3Csvg width=464 height=243 xmlns=http://www.w3.org/2000/svg%3E%3Cg #123456 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");
}

    Portanto, qualquer problema que você esteja enfrentando não está relacionado ao SASS - e, na minha opinião, não deve ser marcado ou intitulado como tal.

    EDITAR: Vendo sua atualização, você deve renomear e marcar sua pergunta para deixar claro que você tem um problema com o Storybook. Você está tentando agrupar CSS em JavaScript e tem um problema com isso; isso não está relacionado ao SASS.

    • -1

relate perguntas