Search code examples
djangosasscompilationpycharmfrontend

How do I overwrite Bootstrap SCSS variables for my django website using PyCharm?


I'm using PyCharm to manage my django files and for the front end I'm using Bootstrap. I'm currently using the CDN method to point to the bootstrap files in my base.html file.

I've recently come to a point where I want to customize some of the SCSS variables that bootstrap provides, but I'm puzzled and can't find a guide anywhere to how to do this with my configuration.

I used npm to install the bootstrap files to my outer project folder. I've tried installing django-sass-compiler using pip, and then adding the required setting to my settings.py, but when I ran the command "python manage.py sass-compiler" (as per the PyPi docs), I got "ModuleNotFoundError: No module named 'django_sass_compiler'"

I'm assuming that if I were to get that working then it would compile my custom SCSS file into a CSS file that would overwrite my current 'main.css' (is that right?), however I can't even figure out that part.

If someone could please point me in the right direction then that would be great, there really isn't a lot of help out there for sass, pycharm, django & bootstrap together.


Solution

  • For anyone wondering how I fixed this

    The problem was not with bootstrap! My colours were actually overwriting the bootstrap styles, however, I could not see the changes because my browser had cached some of the information.

    Going to F12 -> Network Settings -> Disable Cache fixed the issue.