SCSS structure

We are use 7-1 tire scss folder structure in our template

And to compile the scss files we have used libsass.

Follow the below given steps if you want to use scss for styling you site.

Step 1: Installing django-sass-processor

Install libsass by using the below given command.

pip install libsass django-compressor django-sass-processor

step 2: Check Libsass

Make sure that it is installed using this command:

pip show libsass

Step 3: Configuration

After installing the package add it to the INSTALLED APPS in settings.py.

INSTALLED_APPS = [
  ...
  ...
  'sass_processor',
]

And add configuration for STATICFILES_FINDERS in settings.py.

STATICFILES_FINDERS = [
  'django.contrib.staticfiles.finders.FileSystemFinder',
  'django.contrib.staticfiles.finders.AppDirectoriesFinder',
  'sass_processor.finders.CssFinder',
]

Now to store the compiled css files add STATIC_ROOT AND SASS_PROCESSOR_ROOT in settings.py. Change the file path as per your needs.

STATIC_ROOT = BASE_DIR / 'static'
  
SASS_PROCESSOR_ROOT = STATIC_ROOT

Step 4: Using Scss Files in html

We have now configured our project to use scss files, now where we add the link in html file, we have to add it in this way:

<link rel="stylesheet" type="text/css" href="{% sass_src 'assets/scss/style.scss' %}" />