feat: Implement/document SCSS/SASS usage

[SamHjelmfelt]

Description
The documentation only shows how to use css, but scss and sass are widely used. While Bulma is recommended in the documentation, it requires SCSS variables for theming, and it is not obvious how to get it working natively within Jaspr.

SASS is implemented using dart, so this should be relatively straightforward to integrate into the Jaspr build/serve process. https://sass-lang.com/dart-sass/

Additional Context

jaspr_pad has a sass folder and imports sass_builder, but simply importing "sass_builder: ^2.2.1" into a base jaspr project leads to an error: "[ERROR] AssetNotFoundException: node_interop|pubspec.yaml". It is not clear what else is required.

The approach that I was able to get working was to compile scss into css separate from Jaspr. For example, in development:

1. create a lib/scss folder with main.scss
2. Add StyleRule.import('css/main.css') to styles.dart file
3. run "Jaspr serve" in one terminal and "sass --watch lib/scss:web/css" in another terminal.

A few implementation ideas for Jaspr:

1. Document above approach on the main website as a quick fix to get users onboarded fast.
2. Update Quickstart generation to create the above mentioned lib/scss/main.scss file and StyleRule.import('css/main.css') code. Jaspr serve/build run the necessary "sass --watch lib/scss:web/css" command under the covers.
3. Support sass and scss files in StyleRule.import (seamlessly compiling in the background)
4. Expose Jaspr build hooks and include the sass compilation logic by default in the quickstart. Build time hooks would be useful for more than just scss compilation, but would expose more complexity to users. For example sass dart build code, see the compile-sass.dart sample on the dart-sass page: https://sass-lang.com/dart-sass/

[schultek]

I think sass_builder already does everything needed.

For jaspr_pad and other projects using it, running jaspr serve or jaspr build already also runs sass compilation. Not this only works for files inside ' web/', not 'lib/' (you can import files from 'lib/' but these will not be compiled itself to ' .css' counterparts).

[neoacevedo]

Running jaspr build having sass_builder installed runs the builder for it but it raises an error that I have no clue where is coming from:

AssetNotFoundException: node_interop|pubspec.yaml

And jaspr fails to build.

I can't see exactly if is correct to post it here or in node_interop, sass or sass_builder packages issues report.

[schultek]

You can try 'jaspr clean' before rebuilding.

[neoacevedo]

sass_builder still has the same issue about AssetNotFoundException and there is no mode to solve it. Also, there is a bunch of warnings as errors generated when running jaspr serve that makes it useless, so it's better the mode as the OP is doing with sass.