40

I'm using twitter bootstrap and django. I've got my dependencies handled with a pip requirements file.

I've got 2 questions:

  1. How can I use less while I'm developing so it'll get compiled when I edit one of my less files?
  2. How can I create some kind of build script that will compress and combine my JS and generate CSS from Less as part of a deployment?

I've written a custom build script that creates a virtualenv, runs 'pip install -r requirements.txt', django syncdb, django migrate and then off we go.

What's the easiest way of integrating less into this?

Thanks

user1037541
  • 897
  • 2
  • 9
  • 11

2 Answers2

44

  1. Install django-static-precompiler:

  2. Run pip install django-static-precompiler

  3. Add static_precompiler to INSTALLED_APPS

  4. Install lessc executable, either via your package manager or run npm install less (npm is node package manager, which should be distro-installable, use at last resort)

  5. Use less in templates:

  6. Load the template tag: {% load less %}

  7. Use less template tag: <link rel="stylesheet" href="{{ STATIC_URL}}{% less "path/to/styles.less" %}" />

Note that by default compiled files are saved into COMPILED folder under your STATIC_ROOT (or MEDIA_ROOT if you have no STATIC_ROOT in your settings). You can change this folder name with STATIC_PRECOMPILER_OUTPUT_DIR setting. See the documentation for further details.

I didn't try it personally but i know that django-compressor also supports less.

Edoardo Facchinelli
  • 402
  • 5
  • 12
jpic
  • 32,891
  • 5
  • 112
  • 113
  • 8
    I prefer django-compressor as it does more helpful things for me, and can compile both scss and coffeescript – krs Jan 04 '12 at 14:21
  • The problem with all does apps is that they don't monitor @include'd files for changes ... – jpic Sep 17 '12 at 15:05
  • 1
    @jpic, here's the solution for less css: http://www.caktusgroup.com/blog/2012/03/05/using-less-django/ The JS interpreter can run client-side, though slowly. So if DEBUG=True, you use the JS interpreter, which eliminates monitoring for changes. – benesch Jan 10 '13 at 02:37
  • Absolutely, that looks like [how I use lesscss and twitter bootstrap nowadays](http://blog.yourlabs.org/post/40243673811/bootstrap-lesscss-and-django) - which includes having less in debug mode too ! – jpic Jan 11 '13 at 09:05
  • I also had to add 'less.finders.LessFinder' to STATICFILES_FINDERS in settings. – John Lehmann May 26 '13 at 18:36
  • 18
    I'm the author of `django-less` and I recommend to use `django-static-precompiler` (which I'm developing as well). It's universal (Less, SCSS, Coffeescript and more coming), it monitors the included files, and has a nice `static_precompiler_watch` management command. It's compatible with `django-less` so you don't need to update your code. – Andrey Fedoseev Apr 21 '14 at 02:43
15

The selected answer is now out of date: django-less is no longer being maintained (as specified on its pypi page), and the developer suggests using django-static-precompiler instead.

brianmearns
  • 9,581
  • 10
  • 52
  • 79