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

Question

I'm using django-compressor + LESS.

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

I will explain. I have next folder structure:

common/  # Django app with some common stuff, e.g. 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 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 pre-compiles my blog_buttons.less - button background points to /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 that it should be a kind of very common situation)

score 0 · Answer 1 · answered Jul 12 '13 at 21:33

0

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

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

answered Jul 12 '13 at 21:33

Martin Blech

13,135
6
31
35

score 0 · Answer 2 · edited May 23 '17 at 12:21

0

My answer to this question is probably relevant. You may also want to add the '--relative-url' argument to lessc https://stackoverflow.com/a/25929152/559629.

edited May 23 '17 at 12:21

Community

1
1

answered Sep 19 '14 at 08:43

wjin

954
1
8
13

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

2 Answers2