Less is adding unwanted code on url when compiled to css

Question

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.

Vucko · Accepted Answer · 2016-07-25 10:14:00Z

1

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.

answered Jul 25, 2016 at 10:14

Vucko

20.9k12 gold badges60 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kristijan Korman Over a year ago

Yes, that was the problem. I was using Visual Studio with Webessentials and the compilerconfig.json defaults file had "relativeUrls" set to true which caused this problem.

Collectives™ on Stack Overflow

Less is adding unwanted code on url when compiled to css

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related