Как развернуть проект с использованием Less CSS в Heroku?

Question

У меня меньше CSS, работающего с моим сайтом Django в локальной разработке. Все выглядит хорошо. Я включаю файлы следующим образом:

<link rel="stylesheet/less" type="text/css" href="{{ STATIC_URL }}less/base.less">
<script src="{{ STATIC_URL }}js/less-1.1.3.min.js" type="text/javascript"></script>

Однако, когда я развернул проект в Heroku, Less CSS по непонятным причинам не работает. Что я не так делаю?

Я точно знаю, что у меня настроен статический носитель: я могу загрузить base.less и less-1.1.3.min.js по правильным путям.

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

Примечание 2: Если вы знаете, как добавить компиляцию Less CSS в процесс развертывания Heroku, без необходимости устанавливать node.js, мне было бы интересно узнать, как это сделать в дополнение к моему основному вопросу ...

Answer 1

Проблема в том, что less.js загружает таблицы стилей .less через XHR, который не работает, если вы не установите соответствующий заголовок Access-Control-Allow-Origin, который S3 не разрешает (https://forums.aws.amazon.com/thread.jspa?threadID=34281).

В качестве обходного пути некоторые люди предлагают настроить HTTP-прокси, который добавляет необходимый заголовок. (http://motoole.com/2011/10/19/hosting-font-face-fonts-on-s3.html) и (http://zefer.posterous.com/pure-html-ajax-solutions-to-upload-files-to-s)

) В противном случае вам придется скомпилировать файлы .less в CSS, так как.js не будет работать.

Конечно, другой альтернативой (которую я использую) является простое развертывание статических файлов на сервере Apache, а не размещение их в S3.

Answer 2

Взгляните на https://github.com/nigma/heroku-django-cookbook

. Для установки nodejs и lessc.

используется крючок post_compile, предоставленный heroku-buildpack-python