Fatima/cookiecutter sass

[fgomez828]

Overview

This PR adds Bootstrap and Sass as dependencies in package.json, adds the develop script to package.json, and adds a static/scss/custom.scss file with the boostrap style import to facilitate overriding Bootstrap styles with Sass on apps we set up with the Django and Wagtail cookiecutter boilerplates. It also adds a bit of documentation and helpful links in the docker/templates README.

Handles #308 Handles #319

Notes

Testing Instructions

• Create an example Django app using the cookiecutter and run it using docker-compose up --build
• Check a default bootstrap style for your Django app, e.g., navbar color
• Use the Sass file to update the bootstrap style you took note of. Run the develop script on your running container using docker-compose exec app npm run-script develop
• Check your browser again and make sure the new style is applied
• make some changes to JavaScript and try to commit them; make sure linting works as expected
• Repeat the above steps for a Wagtail app

[hancush]

@fatima3558 This was the key! https://github.com/datamade/crp-transparency/pull/23/commits/7132de74dceebf12c57642ada7912f69828112b3#diff-02754b8bda6f1825ee739c2bb186c78f2a8247bacc7bf165b09471618d785cf6

[fgomez828]

Gotcha! I've gone ahead and moved the boilerplate code to have that import at the top of the scss files in both affected cookiecutters. I'll go ahead and test this way before requesting someone else's review.

I am curious about CDI though, as this was the model I was using and it has this import at the bottom of the file?

[fgomez828]

on another note, looks like Dart Sass has phased out @import and uses @use instead. It'll be worth keeping an eye out, especially as we find a way to update our dependencies per #312

I need to take some time to figure out which version of Sass we use, but here's the Dart Sass Github repo

Update: we are using dart-sass as an npm package.