Laravel-mix: Css compile error when using @import with Google Font api2

[gregh]

• Laravel Mix Version: 5.0.4 (npm list --depth=0)
• Node Version (node -v): v8.10.0
• NPM Version (npm -v): 3.5.2
• OS: Ubuntu 18.04.4 LTS

Description:

Error in CSS compile when loading an imported Google Font from app.scss

Steps To Reproduce:

Load a new Laravel project with bootstrap replace the font in app.scss with a google font.
~
composer create-project laravel/laravel quickstart --prefer-dist
composer require laravel/ui
php artisan ui bootsrap
npm install && npm run dev
~

app.scss:
~~~
// Fonts
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';
~~~

Compiled app.css:
~~~
@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;

700&display=swap);@charset "UTF-8";
~~~

[rbresjer]

@gregh Did you find a workaround for now? Other than an import per font weight.

[gregh]

@rbresjer I did not. I was trying to learn Sass and thought it would be better to wait till this is resolved.

[domstubbs]

I’ve just run into this as well. It looks like the semi-colons are the issue, but I’m not sure which component is tripping up on them.

Fortunately it is possible to use a slightly different import syntax that bypasses this:

@import url('https://fonts.googleapis.com/css?family=Roboto:500,700');

I pulled that syntax from an older project, so I’m fairly certain that even if Google have changed the suggested import URLs recently they’re unlikely to intentionally break the URLs that they were suggesting previously.

Edit: Actually, Google seem to return identical output for these two URLs, so the older syntax shouldn’t affect functionality at all:

Old syntax:
https://fonts.googleapis.com/css?family=Roboto:500,700,900&display=swap

New syntax:
https://fonts.googleapis.com/css2?family=Roboto:wght@500;700;900&display=swap

[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.

[jsoh]

I also came across this today. There is a open issue related to this with a workaround by replacing the semicolons in the URL with %3b:

https://github.com/JeffreyWay/laravel-mix/issues/2430#issuecomment-653915587

[guillecro]

I confirm this issue. I dont find the workaround the best one but its something I guess

[AMoktar]

I'm having the same issue too, the compiler breaks after the semicolon