在 webpack 中解析 SVG

Question

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

这是我收到的错误：

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

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')

如果您提供的代码片段不是直接来自您的源代码，那么您可能在这个过程中有一些格式化程序破坏了它 (?)

N.B。您通常不必对 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），大多数解释器应该只接受它美好的。我不确定您的构建堆栈，但我猜 "safe over-escaped format for obsolete IEs" 可以作为构建结果生成；如果你使用预处理器，你可以嵌入 'dataurized' 外部资源，什么可以防止这种格式化事故。（啊，这可能就是 postcss-inline-svg 为你做的。）

在 webpack 中解析 SVG

parsing SVG in webpack

svg

loader

node-modules

webpack

yarnpkg