Less, @include and wrong urls

Question

css

I used to have a big styles.less file with a structure like this:

project/
|-im/
| |- image-1.jpg
| |- image-2.png
|  
|-js/
| |-js-file-1.js
| |-js-file-2.js
|  
|-styles.css
|-styles.less

With SimpLESS 1.4 the styles.less file was compiled to styles.css and everything was fine.
The fact is that the project is located on different hostings and, depending on the settings, the static files can be either in a subfolder or in a separate CDN. Then the paths to the cards were specified relative to the less-file inside:

div {
  background: url('background.png');
}

Now the file has become too big and I want to split it into subfiles:

project/
|-im/
| |- image-1.jpg
| |- image-2.png
|  
|-js/
| |-js-file-1.js
| |-js-file-2.js
|  
|-less/
| |- lib.less
| |-foo.less
| |-bar.less
|  
|-styles.css
|-styles.less

Content styles.less:

@import "less/lib";
@import "less/foo";
@import "less/bar";

As a result, this code, which is in the file less/foo.less:

div {
  background: url('background.png');
}

It compiles to the following nonsense:

div {
  background: url('less/less/background.png');
}

Is there a correct way to get around this behavior, provided that inside the less file I do not know the direct path to the picture, only the relative one.

Answer 1

Or maybe it's easier for you to move the style.less file to the less folder? Indeed, in fact, this is also a less resource file, and its transfer will in no way break the layout.

Answer 2

(removed)