Integrate SASS/SCSS with Django

Question

I want to use SASS/SCSS with Django application.

I followed the link https://bitbucket.org/synic/django-sass. I installed SASS using sudo pip install sass.

When i run Python manage.py runserver,iam getting error as

'sass' is not a valid tag library: Template library sass not found, tried django.templatetags.sass

Can Anyone help me?!

Answer 1

python sass (pip install sass) https://pypi.python.org/pypi/sass is different from django-sass (https://bitbucket.org/synic/django-sass)

Download django sass from https://bitbucket.org/synic/django-sass after that install and setup as documented .

Answer 2

Have you first installed sass, the ruby app?

$ apt-get install ruby-sass

You'll know if it's done properlly; as type sass on the command line, does sassy things.

Next, I cloned django-sass (from the other answer):

git clone git@bitbucket.org:synic/django-sass.git

Then navigated to the puled folder and installed it.

$ python setup.py install

Initially the installation crashed out:

IOError: [Errno 2] No such file or directory: 'CHANGES.rst'

So I quickly created the file:

 touch CHANGES.rst

and ran the install command again.

no problems.

Answer 3

The django-sass-processor package is a great package that lets you easily integrate SASS/SCSS with Django.

Here's a tutorial on how to set up SASS/SCSS with Django.

I've used the package a few times and have been happy with it.

Answer 4

Here is my DIY out of the box solution

1. Install Libsass and Watchdog

   pip install libsass watchdog
   

2. Create an app named core

   python manage.py startapp core
   

core/sass.py

import os
import time
import site
import sass
import threading
from pathlib import Path
from django.apps import apps
from django.conf import settings
from watchdog.observers import Observer
from watchdog.events import FileClosedEvent


def compiler():
    packageFolders = [
        site.getusersitepackages(),
        *[path for path in site.getsitepackages()],
    ]

    staticFolders = settings.STATICFILES_DIRS.copy()
    staticFolders += [
        os.path.join(app.path, "static") for app in apps.get_app_configs()
    ]

    compileFolders = staticFolders.copy()
    for staticFolder in staticFolders:
        for packageFolder in packageFolders:
            if Path(staticFolder).is_relative_to(packageFolder):
                if staticFolder in compileFolders:
                    compileFolders.remove(staticFolder)

    if settings.DEBUG:

        def watcher(path):
            class Event(FileClosedEvent):
                def dispatch(self, event):
                    filename, extension = os.path.splitext(event.src_path)
                    if extension == ".scss":
                        time.sleep(0.5)
                        for d in compileFolders:
                            if os.path.isdir(d):
                                try:
                                    sass.compile(
                                        dirname=(d, d),
                                        output_style="expanded",
                                        include_paths=staticFolders,
                                    )
                                except sass.CompileError as error:
                                    print(error)

            event_handler = Event(path)
            observer = Observer()
            observer.schedule(event_handler, path, recursive=True)
            observer.start()
            try:
                while True:
                    time.sleep(1)
            except KeyboardInterrupt:
                observer.stop()
            observer.join()

        for d in compileFolders:
            if os.path.isdir(d):
                try:
                    sass.compile(
                        dirname=(d, d),
                        output_style="expanded",
                        include_paths=staticFolders,
                    )
                except sass.CompileError as error:
                    print(error)
                thread = threading.Thread(target=watcher, args=(d,), daemon=True)
                thread.start()
    else:
        d = settings.STATIC_ROOT
        if os.path.exists(d):
            try:
                sass.compile(
                    dirname=(d, d),
                    output_style="expanded",
                    include_paths=staticFolders,
                )
            except sass.CompileError as error:
                print(error)

core/apps.py

from django.apps import AppConfig
from core.sass import compiler


class CoreConfig(AppConfig):
    default_auto_field = 'django.db.models.BigAutoField'
    name = 'core'

    def ready(self):
        compiler()

For more info, djboilerplate is a boilerplate project where I have added this out of the sass feature