SCSS variables not compressed to cache files

[NandithaMudunuru]

I am developing a Django project combined with Bootstrap for the front end. Since I am a beginner, I may have gotten parts of the workflow completely wrong. So I am going over all the details, which may be unnecessary for an experienced reader, but I think it would be easier to correct me if I got something more fundamentally wrong. I appreciate your patience.

---

The Base

My goal is to limit the work I do on the front end while still controlling details like color themes, etc. So, first, I import the bootstrap stylesheet from the remote url to have access to all the bootstrap components.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

Then I use local .scss only to edit some features that I want to customize. For example, my app has the bootstrap.scss file in the corresponding static folder.

project
│   manage.py
│   db.sqlite3
│
└── myProject
│   │   settings.py
│   └── ...
│   
└── myApp
      │  ...
      │   
      └── static
            └── myApp
                  └── bootstrap
+                      │   bootstrap.scss
                       └── ...

has the custom scss code:

body {
    background-color: $dark;
    color: $light;
    text-align: null;
}

// Links

.card-link{
    text-transform: uppercase;
    color: $dark;
    font-size: large;
    font-weight: bold;
    text-decoration: none;
}

$link-color:                              $secondary !default;
$link-decoration:                         null !default;
$link-shade-percentage:                   $success !default;
$link-hover-color:                        shift-color($link-color, $link-shade-percentage) !default;
$link-hover-decoration:                   null !default;


// Navbar colors

$navbar-dark-color:                 rgba($light, .55);
$navbar-dark-hover-color:          rgba($secondary, .7);
$navbar-dark-active-color:         rgba($success, .9);
$navbar-dark-disabled-color:        rgba($light, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($secondary, .1);

$navbar-light-color:                rgba($dark, .55);
$navbar-light-hover-color:          rgba($secondary, .7);
$navbar-light-active-color:         rgba($success, .9);
$navbar-light-disabled-color:       rgba($dark, .3);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($secondary, .1);

$navbar-light-brand-color:                $navbar-light-active-color;
$navbar-light-brand-hover-color:          $navbar-light-active-color;
$navbar-dark-brand-color:                 $navbar-dark-active-color;
$navbar-dark-brand-hover-color:           $navbar-dark-active-color;

Django-compressor

Installation

Since I have to convert the .scss files to something that Django can understand, Django-compressor comes in. I have the following packages installed in my django virtual environment as recommended by Michael Yin

django-compressor        4.0
django-libsass           0.9

Setup

To use the package, I edit my project settings

project
│   manage.py
│   db.sqlite3
│   myApp
└── myProject
+   │   settings.py
    └── ...

adding the compressor to installed apps along with myApp.

INSTALLED_APPS = [
    ... ,
    'compressor',
    'myApp',
]

I also set up the following variables in the settings.

# I think these are the file search and gather algorithms
STATICFILES_FINDERS = [
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'compressor.finders.CompressorFinder',
]

# This one is to know which compiler to use once the files are found
COMPRESS_PRECOMPILERS = (
    ('text/x-scss', 'django_libsass.SassCompiler'),
)

# The location within the output folder where the compressed files have to be saved
COMPRESS_OUTPUT_DIR = 'cache/'

# No idea what these two do. I got these from some old threads on stack overflow when diving into a rabbit hole for some error which I have since fixed. 
## I don't mess with things when they work.
LIBSASS_OUTPUT_STYLE = 'compressed'
STATICFILES_STORAGE = 'django.contrib.staticfiles.storage.ManifestStaticFilesStorage'

# Directories where the source files can be found and where the static files have to be dumped for production not sure if these two can be different locations.
STATIC_ROOT = 'static'
STATIC_URL = 'static/'

Usage

I add the local files to the Html source as a stylesheet.

project
│   manage.py
│   db.sqlite3
│
└── myProject
│   │   settings.py
│   └── ...
│   
└── myApp
      │  ...
      │   
      └── templates
            └── myApp
+               │   base.html
                └── ...

<!-- Bootstrap CSS from web-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<!-- Bootstrap local -->
{% load compress %}
{% compress css %} 
<link type="text/x-scss" href="/static/coordinators/bootstrap/bootstrap.scss" rel="stylesheet" media="screen"> 
{% endcompress %}

Finally, I run the compressor

(django) myProject> python manage.py collectstatic
(django) myProject> python manage.py compress --force

Results & The Issue

A new folder is created

project
 │   manage.py
 │   db.sqlite3
 │   myProject
 │   myApp
 │
+└── static
     │   cache
     │   myApp
     └── ...

The scss files from the source are collected and dumped in the static\myApp folder when collectstatic command is executed. Further, the compress --force command creates the cache with compressed .css files. This should have done the job. However, only the class variables (body and card-link) from the scss files are compressed. Individual variable assignments ($link-# or $navbar-#) are not reflected in the compressed files or my build. Following is the .css file from the cache folder.

/* line 3, myApp/static/myApp/bootstrap/bootstrap.scss */body{background-color:#212529;color:#e9ecef;text-align:null}/* line 11, myApp/static/myApp/bootstrap/bootstrap.scss */.card-link{text-transform:uppercase;color:#212529;font-size:large;font-weight:bold;text-decoration:none}

The link hover colors or the navbar colors do not change. I know that I can style them in the HTML templates but individually editing each class is not something I am interested in. I need some guidance on how to move forward. I attached the requirements.txt file for my python virtual environment.
Following is a list of some more information that might be useful:

• OS: Windows 11 Home edition
• Running Django project in debug mode: DEBUG = True

Once again thank you for your patience.