Less, @include и неправильные url

Question

[Павло Пономаренко]

Раньше у меня был большой файл styles.less и приблизительно такая структура:

project/
|- im/
|  |- image-1.jpg
|  |- image-2.png
|  
|- js/
|  |- js-file-1.js
|  |- js-file-2.js
|  
|- styles.css
|- styles.less

При помощи SimpLESS 1.4 файл styles.less компилировался в styles.css и всё было прекрасно.
Дело в том, что проект располагается на различных хостингах и зависимо от настроек файлы статики могут быть или в подпапке или в отдельном CDN. Потом пути к картикам указывались относительно less-файла внутри:

div {
  background: url('background.png');
}

Теперь файл стал слишком большой и я хочу разбить его на подфайлы:

project/
|- im/
|  |- image-1.jpg
|  |- image-2.png
|  
|- js/
|  |- js-file-1.js
|  |- js-file-2.js
|  
|- less/
|  |- lib.less
|  |- foo.less
|  |- bar.less
|  
|- styles.css
|- styles.less

Содержимое styles.less:

@import "less/lib";
@import "less/foo";
@import "less/bar";

В итоге такой код, который находится в файле less/foo.less:

div {
  background: url('background.png');
}

Компилируется в следующий бред:

div {
  background: url('less/less/background.png');
}

Есть ли корректный способ обойти это поведение при условии, что внутри less файла я не знаю прямого пути к картинке, только относительный.

Answer 1

[Makito]

А может быть вам проще перенести файл style.less в папку less? Ведь по сути это тоже файл ресурса less, а его перенос никоим образом не сломает верстку.

Comments

[Павло Пономаренко]

Вот это практически то, что надо! Только теперь огорчает, что во время разработки я не могу подключать less напрямую, надо подключать именно css. =(

[Makito]

А вы при разработке компилируете less налету? А зачем?

[Павло Пономаренко]

Да. А как предлагаете делать?

[Makito]

Настроить ваш редактор на сохранение при потере фокуса, таким образом пока вы переключитесь в браузер для обновления изменений файл уже успеет сохраниться, а simpless успеет его скомпилировать (если файл не слишком большой)

[Павло Пономаренко]

Хм. А я как-то и не замечал, что SimpLESS сам его собирает. Всегда нажимал в нём кнопку «обновить»))
Тогда спасибо. Остался один вопрос. Хотя он пока уже не критичен:

@import "lib";
@import "overall";
@import "utils";
@import "chat";

@import "screen/welcome";
@import "screen/game";
@import "screen/shop";
@import "screen/profile";

Т.е. что, если я захочу какую-то группу файлов вынести в подпапку? Опять натыкаюсь на ту же проблему?

[Makito]

Вот здесь к сожалению не подскажу — сам я не использую вложенности в подпапки.
С другой стороны — зачем вам такая большая фрагментация? Вот понадобится вам найти какой то класс — замучаетесь искать.