I’m using django-sass-processor to automatically
compile the SASS files in a Django 2.1 project. Everything runs fine locally,
but on Heroku the pages appear unstyled. The problem is that Heroku only runs
./manage.py collectstatic when building a Django app. This simply copies the
static files to the
./staticfiles folder. As the SCSS files weren’t compiled
yet, only the
*.scss files end up in that folder.
The solution is simple: customizing how Heroku builds our Django app.
Heroku’s Python buildpack offers two hooks,
post_compile. To use them, we just need to add
bin/post_compile in our app’s repository. For compiling SCSS, we want to use
post_compile, as it will only run after all pip packages are installed.
Create a file in
bin/post_compile in the root of your repository with the
#!/usr/bin/env bash cd "$1" || exit 1 echo "-----> Compiling SCSS" python manage.py compilescss --traceback echo "-----> Collecting static files" python manage.py collectstatic --noinput --traceback
The first command,
cd "$1", changes the current directory to the build
directory passed in by Heroku. Then we just run the
compilestatic as needed.
If you commit this file and deploy to Heroku, you should already see the SCSS
compilation working. The only remaining step is a small optimization. We want
to avoid Heroku running
compilestatic, as we’re running it ourselves. Simply
heroku config:set DISABLE_COLLECTSTATIC=1 --app <YOUR_APP_NAME>
That’s it! Everything should be running fine, and if you need to add other
build steps (e.g. minifying, compressing images, etc.), just add them to the
You can see how I’ve done in my Django project on https://github.com/vitorbaptista/lainonima.