Your Angular app probably doesn't need SASS

As it turns out, using SASS can slow your Angular build a lot. This may come as a suprise, since SASS, when run from command line (either dart-sass or the C++ based node-sass) can churn through tons of files in few seconds. When used in Angular components, however, you could be looking at one minute of just parsing SASS in medium-large application with hundreds of components.

At this point you will be asking "so why are we using SASS in the first place" - and it probably boils down to:

• $variables
• Nesting
• Mixins
• No harming in doing that right?

Variables are the trivial part - you can replace them with CSS Variables (or "CSS custom properties" if you are a cop). This can be done with a well-placed script run, but you need to be careful about calling calc() when SASS was just computing a value directly.

Nesting is something you thought you wanted but actually you possibly don't. Since component styles are already scoped per-component, you can usually refer to single css class .foo without requiring it to be child of :host, which is child of .my-section etc. In fact, lot of nesting creates a lot of unnecessary bloat in the output .css files. Moreover, the whole :host thing is only needed to style the topmost, "host" element. ::ng-deep (which we pretend to be deprecated) will work just fine in .css files.

Mixins - odds are you are overusing them. If you have a base style called .btn and you include .btn in several places, consider just saying <button class="btn my-buttonish-thing"> in your .html files. The "macro" capability of SASS could be considered competing and inferior to using the native browser feature of, well, supporting CSS classes that add styling to your elements.

Eject!

At this point, you will be looking for exits. So here's one path:

• Write a script to extract your $variables to my-arr-variables.css
• Write a script to run node_modules/.bin/sass.cmd to all your *.component.scss files. Keep the ones that didn't explode in size due to overzealous use of SASS features and leave the rest as SASS.
• Keep your global top level styles as .scss files, but do consider compiling them outside ng build and referring them as plain .css files (i.e. not referring to them from angular.json, just add a <link rel="stylesheet" href="my-global-styles.css">