Как я могу получить правильные относительные пути в моих скомпилированных файлах LESS css?
У меня возникла проблема с LESS, нарушающим относительные URL-адреса в моих скомпилированных файлах. Например, у меня есть:
├── style.less
├── style.css
├── assets
│ ├── img
│ │ └── bg.png
│ ├── less
│ │ └── included.less
Импорт Style.less included.less, который имеет следующую строку:
body {background: url(../img/wall-texture.png);}
Но вывод в style.css становится
body {background: url(assets/less/assets/less/../img/wall-texture.png);}
Что происходит здесь, и как я могу исправить это, чтобы мои пути оставались правильными после компиляции? Я понимаю, что, возможно, мой относительный путь в include.less должен быть скорректирован, и это прекрасно, но в настоящее время, поскольку меньше удваивает "активы/меньше", он делает его чрезвычайно запутанным, чтобы получить правильный путь, сохраняя при этом разумную структуру папок. Кроме того, я использую подмодули git для включения различных LESS-проектов, поэтому я действительно не хочу изменять ни код в меньшем количестве файлов, ни структуру папок, я просто хочу, чтобы LESS мог компилировать правильно. (Я пробовал все компиляторы Windows, которые я могу найти, и все они ведут себя одинаково.)
Любая помощь очень ценится!
Ответы
Ответ 1
Посмотрите https://github.com/marklagendijk/WinLess/issues/12
Кажется, что это связано с той версией, которую вы используете (1.5.3). Я рекомендую обновить до последней версии winless, которая уже равна 1.8.0.
Было несколько проблем с относительными путями на пути к winless. Но большинство из них, похоже, исправлены. См. Также https://github.com/marklagendijk/WinLess/issues/search?q=path
Обратите внимание, что поведение по умолчанию для меньшего компилятора является фактическим, чтобы сохранить относительный путь, как вы ожидали.
Ответ 2
Может быть решение, которое разрешает компиляцию. Если нет, одно из возможных решений (которое требует от вас изменить файлы LESS) - это интерполяция пути. Таким образом, компилятор может оставить его в покое, добавив к нему:
body {background: url(~"../img/wall-texture.png");}