Less.js: Importing remote urls broken with v3.0.1

[rejas]

With less v2.7.3 (using webpack v3.1.0 and less-loader v4.1.0) I could import remote fonts like this in my main.less file:

@import url('https://fonts.googleapis.com/css?family=Nunito');

With less v3.0.1 using the same config and dependencies I now only get this error when trying to build:

Message:
    ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/less-loader/dist/cjs.js??ref--1-4!./src/css/main.less
Module build failed:

 */
@import url('https://fonts.googleapis.com/css?family=Nunito');
^
Can't resolve './https://fonts.googleapis.com/css?family=Nunito' in 'C:\Projekte\mine\homepage\src\css'
      in C:\Projekte\mine\homepage\src\css\main.less (line 6, column 0)

[matthew-dean]

I think this might be related to the fact that Less no longer auto-switches to a "css" import (preserving the @import statement) just because it finds a "css" string somewhere in the URL.

Try @import (css) url('https://fonts.googleapis.com/css?family=Nunito');

[rejas]

Awesome @matthew-dean that did help indeed. Thx a lot!

[dmitriy-drenkalyuk]

@matthew-dean Is there a way to tell the compiler to use https by default when resolving urls from imports? e.g. when I use @import url(//fonts.googleapis.com/css?family=Open+Sans:400,700);, the output is
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans Regular'), local('OpenSans-Regular'), url(http://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0e.ttf) format('truetype'); }
When I put this to a page that is loaded via HTTPS, I get a 'mixed content' error and http requests are blocker by browser. So now I have to update all the imports to use (css) or https://..., so just wondering if I could do this with a config option instead?

[seven-phases-max]

so just wondering if I could do this with a config option instead?

No. More over the very idea of importing fonts.googleapis.com into a compiled CSS is dangerous because fonts.googleapis.com does sniff the used browser (obvoiusly Less in node will report itself as Chrome/Chromium) and may return different results depending on that (so far I did not heard of any problem in this regards but it is free to break at any moment).

[matthew-dean]

@dmitriy-drenkalyuk Why not just write:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

?

[dmitriy-drenkalyuk]

@matthew-dean This is what I did eventually, was just looking for an option to do it via config, so that we don't need to search and update all the places where we use such imports.