Fix: SASS implementation does not support different CSS builds per Engines

[malparty]

Issue

The current way SCSS files are pre-compiled in our template only works with the root stylesheets. There is no documentation or example on extending that to have different stylesheet builds for the engines.

Moreover, I am not sure that this script supports importing a core SCSS file from the root app into the SCSS files built within the engine — e.g. when we want to share bootstrap variables.

Expected

The Template provides a ready-to-use CSS pre-compilation that extends seamlessly when creating a new engine

Technical Options

1. Keep using sass script in package.json, but add a syntax that would also build the paths within the engines 🤔
2. Use sassc-rails gem instead of cssbundling-rails, rename the application stylesheets pack into application_style (to prevent conflict with the JS one) and let Rails handle the engine mapping (tested and working well with core SCSS!)
3. Other?

[olivierobert]

@malparty Did you check the syles in any engine on MIA? e.g. https://github.com/nimblehq/mia-web/blob/development/engines/mia_account/app/assets/stylesheets/mia_account/application.scss. It requires Webpack though as noted in this config: https://github.com/nimblehq/mia-web/blob/752f45a860b25bdc456c1bcc82b6b5a6ca18e334/config/webpacker.yml#L11-L23

[malparty]

Yes it is using Webpack and from my understanding, the Nimble Rails Template is trying to move away from Webpack, no? 🤔

[olivierobert]

Rails is not including Webpack by default to have a leaner base fraemwork and also leaving the door open to other build tools like Esbuild. IMO for building a medium to complex application, having a build tool might be needed. Think of usin PostCSS for adding browsers prefixes, using new CSS features, etc. Nowadays I would recommend to use Esbuild when a build tool is required.

[andyduong1920]

Might I know what is the current CSS precompile lib in the current template @malparty 🤔

[andyduong1920]

DartSass allow us to separate the build

• input file: https://github.com/sass/node-sass#file
• outfile file: https://github.com/sass/node-sass#outfile

We are using it in Phoenix project, this is the configuration from the Elixir side (it will convert to DartSass command)

[malparty]

@andyduong1920 @olivierobert after some review/challenges, we rolled back to use dart-sass in our project.

When implementing this task, I will add the needed documentation to have stylesheets ready for engines.

Mainly 2 things:

• add the input.scss:output.css in the build:css command (I will change the current command so it already embrace this format)
• add the --load-path argument with the root-app stylesheets folder (so we can import/use 'core')