We intend to extend openstack's Horizon, which is a Django application. The first goal: add some custom CSS. Our approach is to create an own Django project and, in settings.py, to import Horizon's default settings ("from openstack_dashboard.settings import *"). After this import we extend the TEMPLATE_DIRS, by adding our custom template directory before the original Horizon directories. The template directory is BASE_DIR/templates. In it is the file _stylesheets.html.
This approach works well while in debug/development mode (Django delivers the correct template and CSS). But when we deploy the application with debug mode off, our custom CSS code (i.e. less files) is not included correctly. The less files are collected to STATIC_ROOT:
(VENV)[root@vagrant-centos7 static]# ls
bootstrap custom.less dashboard horizon horizon.less
<link href='{{ STATIC_URL }}custom.less' type='text/less' media='screen' rel='stylesheet' />(VENV)[root@vagrant-centos7 custom_horizon]# python manage.py compress
Found 'compress' tags in:
/opt/stack/horizon/horizon/templates/horizon/_scripts.html
/opt/custom_horizon/custom_horizon/templates/_stylesheets.html
/opt/stack/horizon/openstack_dashboard/templates/_stylesheets.html
/opt/stack/horizon/horizon/templates/horizon/_conf.html
Compressing... done
Compressed 4 block(s) from 4 template(s).
And when calling the site, the correct template is being used. The generated CSS file does not contain the contents of custom.less, though. To mention it again: With DEBUG mode on, everything works perfectly.
Does anyone know, why this could happen? Thank you in advance!
horizon by default uses lesscpy (python) instead of lessc (javascript). Obviously lesscpy did not like our less code.
So we changed this:
COMPRESS_PRECOMPILERS = (
('text/less', 'lesscpy {infile}'),
)
To this:
COMPRESS_PRECOMPILERS = (
('text/less', 'lessc {infile} {outfile}'),
)
lessc likes our less code more and it works!