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

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: \

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

回答:

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

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

回答:

在引入的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>’);/

回答:

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

回答:

你好,请问你解决了吗?我也是这问题。。

回答:

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

回答:

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

回答:

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

回答:

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

回答:

我也遇到这个问题了,我的是因为在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>");

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注