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.

スクリーンショット 2015-12-22 10.46.30.png

Then, the Less watcher registration window will appear.

スクリーンショット 2015-12-22 10.46.56.png

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!

スクリーンショット 2015-12-22 10.48.30.png

↑ 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

Use LESS with Django
Use Gentelella with django
Use MySQL with Django
Use prefetch_related conveniently with Django
[Django] Use MessagePack with Django REST framework
Use Unicode 6.0 emoji with django / MySQL
Internationalization with django
CRUD with Django
Django 1.11 started with Python3.6
Use mecab-ipadic-neologd with igo-python
Development digest with Django
Use RTX 3090 with PyTorch
Use ansible with cygwin
Use pipdeptree with virtualenv
Output PDF with Django
[Python] Use JSON with Python
Use Mock with pytest
Markdown output with Django
Use indicator with pd.merge
Twitter OAuth with Django
Use mecab with Python3
Use tensorboard with Chainer
Use DynamoDB with Python
Use pip with MSYS2
Getting Started with Django 1
Send email with Django
Use Python 3.8 with Anaconda
Use pyright with Spacemacs
Use TypeScript with django-compressor
Pooling mechanize with Django
Use Enums with SQLAlchemy
Use Python / Django with Windows Azure Cloud Service!
Use tensorboard with NNabla
Use GPS with Edison
Start today with Django
Getting Started with Django 2
Use nim with Jupyter
Do Django with CodeStar (Python3.6.8, Django2.2.9)
Use shared memory with shared libraries
Use "$ in" operator with mongo-go-driver
Use custom tags with PyYAML
Use directional graphs with networkx
Get started with Django! ~ Tutorial ⑤ ~
Use TensorFlow with Intellij IDEA
Minimal website environment with django
Create an API with Django
Use Twitter API with Python
Use pip with Jupyter Notebook
Do Django with CodeStar (Python3.8, Django2.1.15)
Deploy Django serverless with Lambda
Python3 + Django ~ Mac ~ with Apache
Use DATE_FORMAT with SQLAlchemy filter
Use TUN / TAP with Python
Use sqlite3 with NAO (Pepper)
Create a homepage with django
Use sqlite load_extensions with Pyramid
Get started with Django! ~ Tutorial ④ ~
Getting Started with Python Django (4)
Use Windows 10 fonts with WSL
Web application creation with Django
Use chainer with Jetson TK1