Use LESS with Django
Installation
First, install node.js and lessc. Gununu.
$ brew install node
$ npm install -g less
$ which lessc
/usr/local/bin/lessc
$ lessc
lessc: no input files
usage: lessc [option option=parameter ...] <source> [destination]
...
I was able to install it!
Watcher edition with PyCharm (recommended)
If you are using PyCharm, we recommend it because it can simplify automatic compilation.
First, create a file with the extension .less.
Then, you will be automatically asked "Register with File Watcher?", So add watcher immediately.
Then, the Less watcher registration window will appear.
Since it recognizes the lessc you installed earlier, just click OK.
Now that the watcher is working, edit the less and save it to automatically build the css. Easy!
↑ Although it looks like a hierarchical structure on the display, CSS is automatically created in the same directory.
Online conversion with Django compresser
$ pip install django-compressor
Added compressor to ʻINSTALLED_APPS`
For reference, take a look at the Django oscar HTML file
layout.html
{% compress css %}
{% if use_less %}
<link rel="stylesheet" type="text/less" href="{% static "oscar/less/styles.less" %}" />
{% else %}
<link rel="stylesheet" type="text/css" href="{% static "oscar/css/styles.css" %}" />
{% endif %}
{% endcompress %}
It looks like this. For use_less, settings.USE_LESS is used as it is.
In this state, in settings
settings.py
COMPRESS_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'compressfiles')
USE_LESS = True
COMPRESS_ENABLED = True
COMPRESS_PRECOMPILERS = (
('text/less', 'lessc {infile} {outfile}'),
)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'compressor.finders.CompressorFinder'
)
With this setting, less in the compless css block will be built together.
This is also useful because you don't have to worry about it being built, just like you would watch it in PyCharm.
Reference: Settings — Django Compressor 1.6 documentation
Offline conversion with Django compresser management commands
When compiling with management commands, in addition to the above settings
settings.py
COMPRESS_OFFLINE = True
COMPRESS_OFFLINE_CONTEXT = {
'STATIC_URL': STATIC_URL,
'use_less': USE_LESS,
}
Add this additional setting. with this,
$ ./manage.py compress
Will now compile less.
Reference: [How to change Oscar ’s appearance — django-oscar 1.1 documentation] (http://django-oscar.readthedocs.org/en/releases-1.1/howto/how_to_handle_statics.html)
Recommended Posts