Как указать относительный путь в LESS PHP при компиляции на ходу?
Недавно я начал использовать LESS для создания общего CSS для нескольких проектов. Поскольку он будет использоваться в нескольких проектах, он включен в мой текущий проект как подмодуль git, а все содержимое помещено в папку. Таким образом, весь файл проекта выглядит так:
myProject
app
//this is the code of my project
public
css
//storing some third party CSS like font awesome
fonts
//font files of third part CSS
myCSS
less
myStyle.less
fonts
myFont.ttf
Some Other files and folders
И я использую Laravel 4.2 в качестве основы. Сначала я начал с использования less.js для компиляции файлов LESS на ходу, и все работает отлично. Ниже МЕНЬШЕ, чтобы включить шрифты.
@font-face{
font-family: OpenSans-Regular;
src: url('../fonts/myFont.ttf');
}
Тем не менее, я обнаружил, что на некоторых старых машинах и мобильных устройствах скорость обработки недостаточно высока, поэтому будет небольшой момент, когда элементы будут отображаться без стиля. Итак, чтобы решить проблему, я решил скомпилировать файл на стороне сервера с МЕНЬШЕ PHP. Ниже приведено то, что я положил в верхней части файла шаблона. (где все остальные страницы будут включать следующие строки)
<head>
<?php
require "lessc.inc.php";
$less = new lessc;
echo $less->compileFile("myStyle.less");
?>
//some other js and css to include
</head>
<body>
//page contents
</body>
Он успешно компилируется, но поскольку LESS компилируется непосредственно на страницу, когда моя страница имеет URL,
http://domain.com/public/myController/myPage/
Он будет искать файл шрифта в
http://domain.com/public/fonts/myFont.tff
где это должно быть
http://domain.com/public/myCSS/fonts/myFont.tff
Как правильно скомпилировать файл LESS с помощью PHP? Я не хочу изменять путь в файле LESS или помещать файл LESS вне папки подмодулей (т.е. myCSS), поскольку этот файл стиля будет повторно использоваться во многих других проектах. Я хотел бы скомпилировать на ходу, так как файл LESS будет по-прежнему быстро изменяться во время разработки.
Решение
Просто укажите свой файл шрифта из корня.
@font-face{
font-family: OpenSans-Regular;
src: url('/myCSS/fonts/myFont.ttf');
}
Другие решения
Других решений пока нет …