CODEWITHSUNDEEP
csswebpackless
Suman Lama
Suman Lama

Reputation: 946

Less: import css that imports another css with url is not working

What am I doing wrong here?

I am using [email protected]

A.css (css file that imports from url)

@import url('https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin');

App.less (less file that imports A.css)

@import (css) './A.css';

with webpack build, it tries to load

./https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin

instead of the css from url.

Stack:

@import url('https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin');
^
Can't resolve './https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin' in ...

Summary A.Less - imports -> B.css - (B.css uses import via url) -> Not working

Upvotes: 0

Views: 3130

Answers (1)

dysfunc
dysfunc

Reputation: 2008

Less does not automatically switch to a CSS import as a fallback anymore. Try this: 

@import (css) url('https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin');

To import the CSS without it being processed

@import (inline) './A.css';

or treat the CSS as a directive and import and compile the CSS as Less

@import (less) './A.css';

Upvotes: 5

Related Questions