Django-compressor, LESS, relative @import and relative url ()

Question

I am using django-compressor + LESS.

I have a problem with relative @import inside a .less file and relative url(../image.png) in the included .less file.

I will explain. I have the following folder structure:

 common/ # Django app with some common stuff, eg common button styles static/ common/ less/buttons.less img/icon.png blog/ static/ blog/ less/blog_buttons.less 

Inside buttons.less I have mixin for the button:

 .button() { color: white; padding: 4px 10px; background: gray url(../img/icon.png) no-repeat 0 0; } 

Inside blog_buttons.less I use this mixin:

 @import "../../../../common/static/common/less/buttons"; .blog_button { .button; background-color: orange; } 

And here is the problem:

when django-compress precompiles my background points blog_buttons.less - buttons /static/blog/img/icon.png (404 Not Found). But it should point to /static/common/img/icon.png

Am I doing something wrong? (I think this should be a kind of very common situation)

Answer 1

If your static paths are configured correctly, you should be able to handle both common/static and blog/static , as if they were the same folder. Your import statement should look something like this:

 @import "../../common/less/buttons"; 

Answer 2

My answer to this question probably matters. You can also add the argument "--relative-url" to lessc fooobar.com/questions/588108 / ....