Pixelstrap - Admin Document

Working With SCSS files.

Installing django-sass-processor

1. Run the following command in terminal.

pip install libsass django-compressor django-sass-processor

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

Using SCSS files in template:

To use the scss files in django, first load the sass_tags and instead of keyword 'static' we will use 'sass_src' to access the scss files.

{% load sass_tags %}
  <!DOCTYPE html>
  <html lang="en">
  
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="{% sass_src 'documentation/assets/scss/style.scss' %}" type="text/css">
      <title>Using sass with django.</title>
    </head>
  
    <body>
      <h1>This is a sass compiled django template.</h1>
    </body>
  
  </html>

During deployment make sure to add the following code in settings.py, to avoid MEMI type error.

import mimetypes
  mimetypes.add_type("text/css", ".css", True)

Conclusion