npm run build报“Error in parsing SVG: Unquoted attribute value”

Question

vue项目执行npm run build时一直报错，运行是没有问题的，但是打包一直报错，提示：

vue_first_project@1.0.0 build /Users/yan/vue_first_project
node build/build.js

⠸ building for production...Error processing file: static/css/app.36864bcdcb0e1117ee302ffebb939a36.css
(node:15116) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 3): postcss-svgo: Error in parsing SVG: Unquoted attribute value
Line: 0
Column: 14
Char: \

一直找不到错误在哪，请问这个一般是什么原因造成的？有没有什么插件可以帮助？

Answer 1

报错原因就是 压缩和抽离CSS的插件中只允许 SVG 使用双引号

vue项目可能涉及打包压缩的语法错误 确认配置是否有style-loader / css-loader 进行编译

Answer 2

在引入的css文件中的svg注释或者用其他方法屏蔽:列如下面的background-image引用了svg,把它注释掉就可以了
/background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='%236c6c6c' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='%23l' opacity='.27'/><use xlink:href='%23l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='%23l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='%23l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='%23l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='%23l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='%23l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='%23l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>');/

Answer 3

压缩和抽离CSS的插件中只允许 SVG 使用双引号

Answer 4

你好，请问你解决了吗？我也是这问题。。

Answer 5

我也是同样的问题啊，有没有大神解答一下啊，折腾好久了，项目里引入了带字体的css文件就会这样

Answer 6

是不是loader配置的不对，用file-loader或者url-loader

Answer 7

这是因为在引入的外部css文件中，svg有使用单引号，改成双引号即可。

Answer 8

这个问题我也遇到了，就是因为引入外部css文件中有svg引号问题

Answer 9

我也遇到这个问题了，我的是因为在css文件的background-image的url中使用了单引号，改成双引号就没问题了

background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox=\'0 0 120 120\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'><defs><line id=\'l\' x1=\'60\' x2=\'60\' y1=\'7\' y2=\'27\' stroke=\'%236c6c6c\' stroke-width=\'11\' stroke-linecap=\'round\'/></defs><g><use xlink:href=\'%23l\' opacity=\'.27\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(30 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(60 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(90 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(120 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(150 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.37\' transform=\'rotate(180 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.46\' transform=\'rotate(210 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.56\' transform=\'rotate(240 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.66\' transform=\'rotate(270 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.75\' transform=\'rotate(300 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.85\' transform=\'rotate(330 60,60)\'/></g></svg>");

Answer 10

不得啊，老哥