Меньше импорта CSS и относительных путей

Я использую LESS для организации и импорта всех моих файлов CSS. Я также использую Twitter Bootstrap, который я встроил в свой стиль. Он работает отлично, как показано ниже, но когда я использую lessc для минимизации меньшего файла и сжимаю его до одного, все ад разрывается с помощью моей twitter bootstrap css. Причина в том, что my bootstrap.min.css имеет относительный путь к изображениям как "../img", поэтому, когда я уменьшаю все эти файлы и выгружаю свой выходной файл, он больше не находит этот путь.

Как именно я должен исправить это, я не хочу быть жестким кодом абсолютных URL-адресов в моем CSS?

style.less
    @import './folder_one/file_one';
    @import './folder_one/file_two';
    @import './folder_two/file_one';
    @import './folder_three/file_one';
    // this bootstrap css references images relatively ../img/
    @import './bootstrap/bootstrap.min.css';

Ответ 1

При запуске lessc используйте флаг - relative-urls.

lessc --relative-urls

Он плохо документирован, но по умолчанию он является ложным, что означает, что все @imported файлы будут поддерживать свои URL-адреса (например, background-image, font-face и т.д.), как они есть. Это объясняется тем, что меньшее время уже делает это, и многие пользователи ожидают, что он оставит свои собственные URL.

Когда используется флаг относительных URL-адресов, lessc перезаписывает все URL-адреса в соответствии с местоположением импортируемого файла less/css.

Пример

/dir1/style/main.less

// if you don't include (less) lessc will leave bootstrap
//   as an @import at the top of the lessified css file
@import (less) '../bootstrap/bootstrap.min.css';

/dir1/lib/bootstrap/bootstrap.min.css

background-image:url("../img/bs-img.gif");

Результат:

/dir1/style/main.css

background-image:url("../bootstrap/img/bs-img.gif");

Ответ 2

Проверьте документы для использования в командной строке. https://github.com/cloudhead/less.js/wiki/Command-Line-Usage. Там есть опция под названием --root-path, которая добавит существующие URL-адреса, чтобы они работали в выходном файле css.

lessc [option option=parameter ...] <source> [destination]

lessc -rp=will/be/prepended sourcefile.less path/to/destination

Например:

Вот исходный url, с файлом в css/src/nest

background-image: url('../../../imgs/bg.png');

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

lessc -rp=src/nest css/src/nest/nesty.less css/nesty.less

И вывод, с файлом в css/

  background-image:url('src/nest/../../../imgs/bg.png')

Существует опция --relative-urls, но я не могу заставить ее работать. Я работаю над сборкой script, которая использует обходное решение, описанное выше. Build-o-Matic

Вот как я обработал определение пути [link]

Ответ 3

Флаг

--relative-urls имеет свой браузер в браузере.

<script>
less = {
    env: "development",
    relativeUrls: true
};
</script>
<script src="less.min.js"></script>