search

schultek / jaspr

Modern web framework for building websites in Dart. Supports SPAs and SSR.
https://jasprpad.schultek.de
MIT License
996 stars 59 forks source link

feat: Implement/document SCSS/SASS usage #218

Open SamHjelmfelt opened 2 months ago

SamHjelmfelt commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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 _nodeinterop, sass or _sassbuilder packages issues report.

schultek commented 2 months ago

You can try 'jaspr clean' before rebuilding.