LESS Prevent less from adding relative url

Question

I'm using dotLess on a MVC project and I cannot add url('') paths from imported less files.

I have the following less code:

@myvar : '../../';

body
{
    background-image:url('@{myvar}chosen-sprite.png');
}

Which generates the following css when in the main .less file, which is correct:

body {
    background-image: url('../../chosen-sprite.png');
}

The problem is that if I move this code to a second .less file on a different folder and then import that file from the main less file. E.g:

@import 'myFolder/mySecondfile.less

Now the generated CSS looks like this:

body {
    background-image: url('myFolder/../../chosen-sprite.png');
}

Is there any way to prevent that "myFolder" from being displayed there? I know I could just write the absolute path, but that would mean changing the address every time the root of the site (which happens often while testing).

Thanks

Answer 1

I'm not sure if you ever got an answer for this, but you could escape the string.

.body {
  background-image: ~"url('chosen-sprite.png')";
}

Notice the tilde and quote surrounding the entire url argument of the style. If you want to read more about it, check out String Interpolation and Escaping Strings.