Wishlist: use Sass instead of CSS in Angular

[Stephanie Leary]

I'd like to propose that we change the Angular configuration from plain CSS to Sass so that we can integrate our colors with Bootstrap's variables files rather than bloating our styles.css file with color overrides. Since Bootstrap generates darker and lighter shades automatically, we're having to account for each of those variations when we change a base color for accessible color contrast.

I've found very little documentation on how to do this, but here is the terse outline of steps:
https://github.com/ng-bootstrap/ng-bootstrap/issues/2959#issuecomment-453530256

and a somewhat longer article:
https://medium.com/@jackortico/how-to-customize-bootstrap-styles-and-variables-when-using-ng-bootstrap-9df293ae903d

Neither mentions the most annoying part of this change, which is that (I believe) we would have to rename all our existing .css files to .scss.

We would not have to start rewriting all our CSS in Sass syntax, and I would rather we didn't. However, if we wanted to take further advantage of this setup, we could try using of Bootstrap's utility classes as @extend or @mixin. This would vastly simplify our markup and, ideally, prevent the kind of tedious upgrade we went through in bug 2000482.

For example, instead of having five utility classes on a div, we would give it a descriptive class name and then write the CSS file like this:

.descriptive-class-name {
  @extend .pe-0;
  @extend .mt-2;
  @extend .fw-bold;
  @extend .text-end;
  @extend .text-dark;
}

If Bootstrap changes its utility classes again, or we decide to move away from Bootstrap, we would be able to replace the relevant styles without making sweeping changes to our HTML files (and creating a million merge conflicts). In theory, anyway.

Here's the Sass documentation on @extend https://sass-lang.com/documentation/at-rules/extend/ and @mixin https://sass-lang.com/documentation/at-rules/mixin/