google-chrome - SCSS。Chrome 中的“#”弃用

Question

我在 index.scss 中使用了类似的东西：

.some-class {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'><path d='M15.477 ... 50.836z' fill='#{$text-muted}'/><path d='M45.3 ... 10h6.1z' fill='#{$text-muted}'/></svg>");
}

但是 Chrome 对我说：

[Deprecation] Using unescaped '#' characters in a data URI body is deprecated and will be removed in M68, around July 2018. Please use '%23' instead. See https://www.chromestatus.com/features/5656049583390720 for more details.

Answer 1

您可以使用 str-replace 将 # 替换为 %23。

.some-class {
   $urlString: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'><path d='M15.477 ... 50.836z' fill='#{$text-muted}'/><path d='M45.3 ... 10h6.1z' fill='#{$text-muted}'/></svg>");
   content: str-replace($urlString, "#", "%23");
}