SyntaxError on build Unclosed string about vue-cli-plugin-windicss HOT 3 CLOSED

Wow, that was a wild goose chase and completely unrelated to Windi or Vue CLI

🙃

After removing all the Windi @apply content- it exposed that Google font import as the last remaining syntax error.
Turns out Webpack doesn't like those semicolons between font weights.
webpack/webpack#10873

This works fine during npm run serve and npm run lint but fails during npm run build

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

Fixed with using an alternative Google font URL (css instead of css2, removing wght@ and ; becomes ,)

@import url('https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700&display=swap');

(and a lot of swearing)

from vue-cli-plugin-windicss.

Good recommendation! Thanks.

Replaced @import with the standard Google <link> to src/public/index.html.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

from vue-cli-plugin-windicss.

Oh that's weird! Thanks for the issue and explanation @sambedingfield

Can I recommend you go with the css2 font but add the import in your HML instead of the CSS. HTML is preferred because you're adding an extra network step to fetch the fonts inside the CS, which will decrease the CLS and LCP performance metrics

from vue-cli-plugin-windicss.