Skip to content

Add script to compile SCSS with node sass package

What does this MR do and why?

Add script to compile SCSS with node sass package

The script ./scripts/frontend/compile_css.mjs compiles our SCSS style code to CSS. It follows the same rules/settings that our sassc-rails gem currently does (compiling the same files) while using dart sass and not the deprecated C implementation.

Compiled CSS files will be placed in app/assets/builds where they can be picked up by the cssbundling gem. The gem needs runs the npm script build:css.

We also mark sass as a production dependency so that our license scanning picks up everything properly.

One more note, the current MR doesn't integrate with the Vite and Webpack dev servers yet, this would be done in a second step.

For more context see the in-progess MR: !140611 (merged)

Co-Authored-By: Muhammed Ali muhammed.ali@airtimerewards.com

Fix minor SCSS syntax error

This one makes dart SASS unhappy

Add build directory to .gitignore

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

N/A

How to set up and validate locally

  1. Run the script yarn run build:css locally.
  2. We now should have CSS files in app/assets/builds/. These will be consumed in: !140611 (merged)

Testing --watch mode:

  1. Start the script with yarn run build:css --watch
  2. Change a file in, e.g. in app/assets/stylesheets/framework. Simply adding a comment or changing a value will trigger a rebuild of all dependent files.
  3. Happiness
Edited by Lukas Eipert

Merge request reports

Loading