Angular-cli: Google Fonts not bundled when @importing the css by url in Less

[rcomblen]

OS?

Linux (Ubuntu Xenial)

Versions.

1.0.0-beta.20-1

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.
Using Less.
I want to use google fonts.

I typically do

@chosen-serif-font: 'Playfair Display';
@import url('https://fonts.googleapis.com/css?family=@{chosen-serif-font}');

This does not work with Angular CLI. It does not bundle the font.

However, if I have the content of https://fonts.googleapis.com/css?Playfair+Display embedded in my Less file, Angular CLI happily bundles the fonts.

[grizzm0]

Does it work with fonts that doesn't have a space in the name?

[rcomblen]

Yes, it seems to work with font names with no whitespace.

[rcomblen]

I found the proper solution with the following:

@chosen-font: 'Open Sans';
@chosen-serif-font: 'Playfair Display';
@material-icon-font: 'Material Icons';

@chose-font-escaped: escape(@chosen-font);
@chosen-serif-font-escaped: escape(@chosen-serif-font);
@material-icon-font-escaped: escape(@material-icon-font);
@import url('https://fonts.googleapis.com/css?family=@{chose-font-escaped}:300,400');
@import url('https://fonts.googleapis.com/css?family=@{chosen-serif-font-escaped}');
@import url('https://fonts.googleapis.com/css?family=@{material-icon-font-escaped}');

Tested with the Less compiler embedded in the browser, and the browser did nicely translate the whitespace into + or %20. Obviously, this is not the case for the http client of the CLI.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}