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
- Run the script
yarn run build:css
locally. - We now should have CSS files in
app/assets/builds/
. These will be consumed in: !140611 (merged)
Testing --watch
mode:
- Start the script with
yarn run build:css --watch
- 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. - Happiness