Search code examples
pythondjangoless

How to use less css with django?

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

Solution

    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.