Less.js: Importing remote urls broken with v3.0.1
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)
rejas
All 6 comments
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');
matthew-dean
on 20 Mar 2018
Awesome @matthew-dean that did help indeed. Thx a lot!
rejas
on 20 Mar 2018
@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?
dmitriy-drenkalyuk
on 30 Oct 2019
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).
seven-phases-max
on 30 Oct 2019
@dmitriy-drenkalyuk Why not just write:
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
?
matthew-dean
on 30 Oct 2019
@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.
dmitriy-drenkalyuk
on 22 Nov 2019
Related issues
papandreou
·
7Comments
BrianMulhall
·
4Comments
heavyk
·
3Comments
xblakestone
·
3Comments
dotnetwise
·
5Comments
Most helpful comment
I think this might be related to the fact that Less no longer auto-switches to a "css" import (preserving the
@importstatement) just because it finds a "css" string somewhere in the URL.Try
@import (css) url('https://fonts.googleapis.com/css?family=Nunito');