在 webpack 中解析 SVG

Question

我在 Symfony 5 上创建了一个项目。当我运行“yarn build”时，我在 webpack 中收到一个错误。我试图从几天内修复它但没有成功，所以我决定寻求一些帮助:)

这是我得到的错误：

我在 webpack.config 中启用了 postCssLoader，并在我的根目录中创建了 posts.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')
}

Answer 1

如果错误逐字传输代码，则有两个换行符（和缩进）使属性无效（参见“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')

如果您提供的代码 sn-p 不是直接来自您的源代码，那么您可能有一些格式化程序在此过程中破坏了它（？）

---

注意您通常不必过多地转义 SVG datauris，您可以使用url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='%23fff'><path d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>")（即唯一的转义序列是#->%23），大多数解释器应该可以很好地理解它。我不确定您的构建堆栈，但我猜可能会生成“过时 IE 的安全过度转义格式”作为构建结果；如果你使用预处理器，你可以嵌入“数据化”的外部资源，什么可以防止这种格式化事故。 （啊，这可能就是postcss-inline-svg 为你做的事情。）