cssvisual-studiocompilationlessweb-essentials

Less is adding unwanted code on url when compiled to css

So i have something like this:

@color1: rgba(0, 0, 0, 0);
@color2: rgba(0, 0, 0, 0.7);
#start-view .start1 {
    .imageGradientOverlay(@color1, @color2, "../images/start/start1.jpg");
}

variable for this is:

.imageGradientOverlay(@color1, @color2, @url-image) {
    background-image: 
        linear-gradient(@color1, @color2), 
        url(@url-image);

    background-image: 
        -webkit-linear-gradient(@color1, @color2), 
        url(@url-image);
}

and the compiled code looks like this:

#start-view .start1 {
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)), url("../../../images/start/start1.jpg");
  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)), url("../../../images/start/start1.jpg");
}

The question is - Why is less when compiling adding two more ../../ ?

If i try to add this /images/start/start1.jpg the code is compiled fine but this is not what i need.

Solution

  • Looking at the LESS options, I believe you have rootpath set to add that prefix. So reset the rootpath and it should be fine.

    You can test it here - LESS2CSS, just add that option.