Как решить проблему с путями картинок после @import Less?

Question

[SerDIDG]

Есть такая структура:

index.html
less /
    index.less
libs /
    common /
        docs /
            docs.html
        less /
            common.less
        img /
            some-image.png

В common.less есть картинки с путями, например url(../img/some-image.png). И всё нормально, если common.less вставлен в docs.html. Но когда я импортирую common.less в index.less, который вставлен в корневой index.html, то картинки принимают путь вроде url(less/img/some-image.png).

Можно ли как-то задать относительный путь, чтобы и в корневом index.html при импортировании common.less в index.less картинки имели правильные пути? Но так же, чтобы ничего не ломалась в docs.html?

Пока вижу выход в переменных, но не хотелось бы для каждого случая иметь разные переменные.

Answer 1

[Руслан Лопатин]

У lessc есть опция --relative-urls для таких случаев.

У less.js есть аналогичная опция relativeUrls.

Answer 2

[winbackgo]

Используйте абсолютные пути.
@img-path: /libs/common/img/;
background-image: url(@{img-path}some-image.png);
а вообще странная структура. Правильнее будет:

css /
img /
libs /
    common /
        docs /
            docs.html
index.html

Comments

[SerDIDG]

У библиотек есть свои картинки и разумеется стили. Библиотека сама по себе не зависимая. Чтобы её было просто обновлять, не хотелось бы её assets где-то перемещать. Если оставлять переменные с абсолютными путями в common.less, то выходит что картинки в docs.html имеют пути вида "localhost/libs/common/less/libs/common/img/", а в index.html - "localhost/less/libs/common/img/".