在网页包中解析SVG

我在Symfony 5上创建了一个项目。当我运行“纱线构建”时，我在网页中收到一个错误。几天之后，我试图修复它，但没有成功，所以我决定寻求一些帮助：）

这就是我得到的错误：

我在webpack.config中启用了postsssloader，并在根目录中创建了postss.config.js

.enablePostCssLoader()

postss.config.js文件

module.exports = {
plugins: [
    require('autoprefixer'),
    require('postcss-svgo'),
    require('postcss-inline-svg'),
    require('postcss-write-svg'),
  ]
}

下面是我试图在css中编写的svg示例

.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'8\' 
     height=\'8\' viewBox=\'0 0 8 8\'%3e%3cpath fill=\'%23fff\' d=\'M6.564.75l-3.59 3.612-1.538- 
     1.55L0 4.26l2.974 2.99L8 2.193z\'/%3e%3c/svg%3e')
}

---

如果错误逐字传输代码，则会有两个换行符（和缩进）使属性无效（请参阅“CRLF”：

.width=\'8\CRLF height..

-这个可以在CSS中反斜杠转义，和

.1.538-CRLF 1.55L..

-这个带有缩进的分隔数字使路径数据无效-必须删除减号和数字之间的所有空格）。如果是这样，只需删除换行符（和超流畅的空格）就可以解决这个问题：

background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'8\' height=\'8\' viewBox=\'0 0 8 8\'%3e%3cpath fill=\'%23fff\' d=\'M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z\'/%3e%3c/svg%3e')

如果您提供的代码片段不是直接来自您的源代码，那么您可能在过程中遇到了一些破坏它的错误（？）

---

---

注意：您通常不需要太多地转义SVG数据URI，您可以使用

url（“数据：image/SVG+xml）”

（也就是说，唯一转义的序列是

->

%23

），大多数解释器应该都能很好地理解它。我不确定您的构建堆栈，但我猜“过时IE的安全溢出格式”可以作为构建结果生成；如果您使用预处理器，您可以嵌入“数据化”的外部资源，那么有什么可以防止这种格式化事故呢。（啊，这可能就是

postsss内联svg

为您所做的。）

请以文本而不是图像的形式提供错误，因为图像是不可搜索的。感谢mate这帮了大忙，我使它与您的第二个示例一起工作，我不再需要启用.enablePostssLoader（）