chore(gridsome): Add support for Sassy CSS, import applicable CSS from `main` to `gridsome-main`

[aaronsteers]

Some of our formatting on gridsome-main is a bit off, specifically some fonts and font sizes.

This effort would reconcile differences and try to pull in the best from both. Header sizes and monospace formatting, for instance.

From main:

From gridsome-main:

TODO

[aaronsteers]

@alexmarple - I'll take this one. Will be a good learning experience for me.

[aaronsteers]

@alexmarple - In researching and looking into this, it appears the Jekkyl site's css was leveraging "sassy" CSS, scss or sass. This is used for declaring variables such as $meltano-blue defined here. It also adds support for single-line comments such as those preceeded by //.

It appears that our current Gridsome installation doesn't have sass support installed, but we could add it. Any objections to us adding in support for sass so we can better reuse more of the existing css when helpful?

[alexmarple]

@aaronsteers yeah for sure. in fact the way to add it globally is described here as you noted. Basically just run yarn add -D sass-loader@^10.1.1 sass and then you should be able to update the main.css file to main.scss. Certain styles that are specific to either pages or templates or components are in those files (and are already set to scss).

Moving to the use of sass variables to make everything a bit cleaner and clearer is a good call.

[aaronsteers]

Closing in favor of #783 . From that issue:

Also, FWIW I think sass already works in our current configuration, no work necessary. Tried it out earlier today and renaming main.css to main.scss had no issues, and we already are writing scss inside the Vue components.