Can less.js handle relative paths for images?

Question

When using less.js, can you not use relative paths for images? Like background:url(../img/header.jpg)

It seems to convert it to an absolute path, that is wrong.

make sure you've applied this: http://stackoverflow.com/questions/9640080/less-incorrectly-importing-files-with-urls/16756664#16756664 — Aram Kocharyan, May 26 '13 at 06:04

Andrew · Accepted Answer · 2012-04-30T21:27:32.630

1

Try quoting the URL, I always do it this way to keep it neat though,

@header-image: "../img/header.jpg";

background: url(@header-image);

Also, the URL code can be seen on github. Looks like it is added if you are running in a browser.

edited Apr 30 '12 at 21:27

answered Apr 30 '12 at 21:20

Andrew

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

I know this is an older question, however I ran into a similar problem and the accepted answer did not work for me.. this did.

Set an @img-path variable to your desired relative path, then use that variable to force LESS to render using that path instead of an absolute path.

@img-path: "/assets/images";

background-image: url("@{img-path}/your-image.jpg");

Check out this other answer I found that pointed me down the right path: https://stackoverflow.com/a/6296706/1896352

2 Answers2