How can I handle multiple "root" scss files?

[rafaeldev]

I seek some examples and tutorials which given me a command to watch one file: "build:css:compile": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"

But I have other scss file which need be watching if it's changes:

• active_admin.scss
• pdf.scss

how can I configure the watcher to build only the changed file?

---

Today I build all these every save from scss file: "build:css:compile": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css ./app/assets/stylesheets/pdf.scss:./app/assets/builds/pdf.css ./app/assets/stylesheets/active_admin.scss:./app/assets/builds/active_admin.css ./app/assets/stylesheets/public.scss:./app/assets/builds/public.css ./app/assets/stylesheets/devise.scss:./app/assets/builds/devise.css --no-source-map --load-path=node_modules"

[PedroAugustoRamalhoDuarte]

@rafaeldev you can do something like this, this will create multiple root files for every .scss file that not start with _

• Script file: bin/build-css

#!/usr/bin/env bash

SASS_PATHS=""

for dirpath in ./app/assets/stylesheets/*; do
  if [ -d "$dirpath" ]; then
    dirname=$(basename "$dirpath");
    SASS_PATHS+="$dirpath:./app/assets/builds/$dirname "
  fi
done

for filepath in ./app/assets/stylesheets/[^_]*.scss; do
  filename=$(basename "$filepath");
  SASS_PATHS+="$filepath:./app/assets/builds/${filename%.*}.css "
done

sass --load-path .app/assets/stylesheets -I node_modules --style compressed --no-source-map $SASS_PATHS $@

• package.json

{
  "scripts": {
    "build:css": "./bin/build-css"
  }
}

[morgoth]

it should be also possible to pass directory as an argument, ie "build:css": "sass ./app/assets/stylesheets/entrypoints:./app/assets/builds --no-source-map --load-path=node_modules", vide https://github.com/rails/propshaft/blob/main/UPGRADING.md#2-migrate-from-sass-rails-to-cssbundling-rails