CODEWITHSUNDEEP
cssdjangodeploymentherokuless
coffee-grinder
coffee-grinder

Reputation: 27600

How do you deploy a project using Less CSS to Heroku?

I have Less CSS working with my Django site in local development. Everything looks fine. I'm including the files as follows:

<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>

However, when I deploy the project to Heroku, Less CSS inexplicably doesn't work. What do I have wrong?

I know for a fact that I have static media set up properly: I can download base.less and less-1.1.3.min.js from the correct paths just fine.

Note: I realize that it's best to compile and minify my .less files for production, but this is just a staging server for development purposes.

Note 2: If you know how to add compilation of Less CSS to the Heroku deployment process, without having to install node.js, I'd be interested in learning how to do that in addition to my main question..

Upvotes: 3

Views: 2152

Answers (2)

manojlds
manojlds

Reputation: 301157

Take a look at https://github.com/nigma/heroku-django-cookbook

It makes use of the post_compile hook provided by heroku-buildpack-python to install nodejs and lessc.

Upvotes: 1

cberner
cberner

Reputation: 3040

The problem is that less.js loads the .less stylesheets through XHR, which doesn't work unless you set the appropriate Access-Control-Allow-Origin header, which S3 doesn't permit (https://forums.aws.amazon.com/thread.jspa?threadID=34281).

As a workaround some people have suggested setting up an HTTP Proxy, which adds the necessary header. (http://motoole.com/2011/10/19/hosting-font-face-fonts-on-s3.html) and (http://zefer.posterous.com/pure-html-ajax-solutions-to-upload-files-to-s)

Otherwise, you're going to have to compile the .less files to CSS, as less.js isn't going to work.

Of course, another alternative (which I use), is to simply deploy the static files to an Apache server, and not host them in S3.

Upvotes: 2

Related Questions