Laravel-mix: Google Font's @import statenent is breaking after compiling from SCSS to CSS

[sptutusukanta]

• Laravel Mix Version: 5.0.4
• Node Version: 12.16.3
• NPM Version: 6.14.4
• OS:

Description:

The generated CSS breaks when SCSS has @import statement with ; in url.

Steps To Reproduce:

I was importing google fonts in my SCSS file:

This statement below works

@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');

This statement below BREAKS

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

The css generated with the above statement is like this.

@import url(https://fonts.googleapis.com/css2?family=Lora:wght@400;

700&display=swap);

Looks like ; (semicolon) in the URL is seen as an end of the statement by the compiler.

[Chopinsky]

A workaround is to use "%3b" instead of ";" in your link

[sptutusukanta]

@Chopinsky Thanks for the workaround. It works perfectly.

I was stuck, seeing I did everything correctly, yet the font was not loading. I thought I misspelled or did wrong in my SCSS, but after spending some time I understood the issue was not with the font or my CSS but compiler.

That's why I was stuck because my focus was never if it was a compiler issue. I hope this should be fixed in the core because Google gives that URL & many others may fall into this trap as well.

[Chopinsky]

Glad to hear the workaround works! Regardless, I think there might be CSS rules driving this sort of behavior we saw. I think if CSS are extracted to modules and then minified, the compiler shouldn't add a line break after the semi-colon; not sure what's the supposed behavior otherwise.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[warna720]

Workaround works but this shouldn't be closed. Bug is still there.

[warna720]

ping @JeffreyWay

[phpguru]

I'm not sure if this is related, but what version of the sass-loader should I be using with Laravel 8.12+? I changed my Google font @import google-font-argument semicolon to %3b but still get:

ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property '0'. These properties are valid:
   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }
    at validate (/home/geoff/Projects/sites/tweetshotz-com/node_modules/schema-utils/dist/validate.js:98:11)

This is on a bare-bones brand new install of Laravel 8x. Literally the only thing I've done is add a Google font. I guess 7.1.0 for now, eh?

[JoshuaRobertson]

A workaround is to use "%3b" instead of ";" in your link

This was exactly what I needed. Thanks for that 👍