relativeUrls is relative to the source .less file but not the output file

[zphhhhh]

Hi, here's my workspace rootpath:

 ---- .vscode -- settings.json
 | -- css ----- index.css  // the .less files will be outputted here.
 | -- images -- logo.jpg
 | -- index.less

index.less

.nav {
    background: url(./images/logo.jpg);
} 

then the output index.css is :

.nav {
  background: url(images/logo.jpg);
}

but the correct index.css should be :

.nav {
  background: url(../images/logo.jpg);
}

my .vscode/setting.json is :

{
    "less.compile": {
        "out": "${workspaceRoot}\\css\\",
        "relativeUrls": true
    }
}

I think now the "relativeUrls": true is relative to the source .less file, but not the output file. So how can I solve it ? Thanks.

[mrcrowl]

A couple of options for how to solve this:

1. If possible, put your index.less file in a less\ folder at the same level as the css\ folder. This will cause the image URLs to be consistent when output..
2. Change the background image prefix to ../ in index.less and leave it where it is. i.e: background: url(../images/logo.jpg);

Unfortunately, the relativeUrls option doesn't have any correlation with the out option. It only affects the way that @import statements are treated.