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

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

Answer 1

如果错误逐字传递代码，则有两个换行符（和缩进）使属性无效（请参阅“ CRLF”：..width=\'8\'CRLF height..-您可以在CSS中反斜杠转义，而..1.538-CRLF 1.55L..-此带有缩进的数字分隔数字，使路径数据无效-您必须删除负号和数字之间的所有空格）。如果是这样，只需删除换行符（和多余的空格）即可解决问题：