[less] Import inline css van url

[TheNephilim]

Situatie

Een theme.less bestand, met daarin:

Cascading Stylesheet:

@import (inline, css) url(https://fonts.googleapis.com/css?family=Fira+Sans:300,300italic,400,400italic,500,700);

Zoals je ziet, gaat het om CSS (van Google Fonts) en wil ik deze inline importeren. Dus zonder @import statement in m'n uiteindelijke CSS.

Probleem

Onherroepelijk krijg ik in de commandline (gulp) deze error:

Potentially unhandled rejection [2] Error: ENOENT, open 'C:\Users\***\proje
cts\***\https:\fonts.googleapis.com\css?family=Fira+Sans:300,300italic,400,4
00italic,500,700'
    at Error (native)

Hier gaan twee dingen mis:
- Openen als absolute url.
- De // word vervangen door \.

Wat heb ik al geprobeerd

Vanalles! Escapen lijkt niet mogelijk (bijv. \/\/), ook zonder url() of iets dergelijks geen resultaat. Op Google vind ik verschillende dingen, maar geen oplossing. Meestal heeft het iets te maken met oudere versies van gulp of iets dergelijks.

Heeft iemand enig idee?

[robertpNL]

URL in aanhalingstekens:

code:

@import (inline, css) url("https://fonts.googleapis.com/css?family=Fira+Sans:300,300italic,400,400italic,500,700");

[TheNephilim]

robertpNL schreef op woensdag 21 oktober 2015 @ 16:27:
URL in aanhalingstekens:

code:

@import (inline, css) url("https://fonts.googleapis.com/css?family=Fira+Sans:300,300italic,400,400italic,500,700");

Had ik al geprobeerd, maar dat maakt ook geen verschil.

[robertpNL]

Tweede poging. Zonder url method?

code:

@import (inline, css) "https://fonts.googleapis.com/css?family=Fira+Sans:300,300italic,400,400italic,500,700";

[TheNephilim]

robertpNL schreef op woensdag 21 oktober 2015 @ 16:29:
Tweede poging. Zonder url method?

code:

@import (inline, css) "https://fonts.googleapis.com/css?family=Fira+Sans:300,300italic,400,400italic,500,700";

Die heb ik ook al gehad

[NNF]

TheNephilim schreef op woensdag 21 oktober 2015 @ 16:17:
Situatie

Een theme.less bestand, met daarin:

Cascading Stylesheet:

@import (inline, css) url(https://fonts.googleapis.com/css?family=Fira+Sans:300,300italic,400,400italic,500,700);

Zoals je ziet, gaat het om CSS (van Google Fonts) en wil ik deze inline importeren. Dus zonder @import statement in m'n uiteindelijke CSS.

Dit moet je eigenlijk helemaal niet willen, denk ik. De CSS-output van die URL is dynamisch; op enig moment zou Google dus de locatie van het font kunnen wijzigen en dan is jouw eerder geïmporteerde @font-declaratie kapot. Ook wordt de CSS aangepast aan de browser die wordt gebruikt (bijv. IE11 serveert ie WOFF, Firefox WOFF2, oudere versies van IE krijgen EOT) en die feature verlies je dan dus ook meteen.

[ Voor 18% gewijzigd door NNF op 21-10-2015 19:40 ]

[TheNephilim]

NNF schreef op woensdag 21 oktober 2015 @ 19:32:
[...]


Dit moet je eigenlijk helemaal niet willen, denk ik. De CSS-output van die URL is dynamisch; op enig moment zou Google dus de locatie van het font kunnen wijzigen en dan is jouw eerder geïmporteerde @font-declaratie kapot. Ook wordt de CSS aangepast aan de browser die wordt gebruikt (bijv. IE11 serveert ie WOFF, Firefox WOFF2, oudere versies van IE krijgen EOT) en die feature verlies je dan dus ook meteen.

Hmmm, daar had ik nog niet over nagedacht. Goed punt!