Sign in

NPM run build reports "error in parking SVG: unquoted attribute value"

Cube edited in Sun, 21 Aug 2022

When NPM run build is executed in Vue project, errors are always reported. There is no problem in running, but errors are always reported in packaging. Prompt:

vue_ first_ [email protected] build /Users/yan/vue_ first_ projectnode 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 valueLine: 0Column: 14Char: \

I can't find where the mistake is. What's the reason for this? Is there any plug-in that can help?

10 Replies
commented on Sun, 21 Aug 2022

The reason for the error is that SVG is only allowed to use double quotation marks in the plug-ins that compress and extract CSS

The Vue project may involve syntax errors in packaging and compression. Confirm whether the configuration is compiled with style loader / CSS loader

commented on Mon, 22 Aug 2022

Svg comments in the imported CSS file or other methods: columns such as the following background image refer to SVG, just comment it out / 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>');/

commented on Mon, 22 Aug 2022

Only double quotation marks are allowed in SVG plug-ins that compress and detach CSS

commented on Mon, 22 Aug 2022

Hello, have you solved it? I have the same problem..

commented on Mon, 22 Aug 2022

I am also the same question. Is there a developer to answer it? After a long time of tossing, the CSS file with font will be introduced into the project

commented on Mon, 22 Aug 2022

Is the loader configured incorrectly, using file loader or URL loader

commented on Tue, 23 Aug 2022

This is because in the imported external CSS file, SVG uses single quotation marks, which can be changed to double quotation marks.

commented on Tue, 23 Aug 2022

I also encountered this problem because of the SVG quotation marks in the external CSS file

commented on Tue, 23 Aug 2022

I also encountered this problem, my reason is that I used single quotation marks in the URL of background image of CSS file, and it's no problem to change it into double quotation marks

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>");
commented on Tue, 23 Aug 2022

No, brother