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

[rafaeldev]

Hi everyone!
It wasn't clear, but I'm using esbuild Anyway, I reached a good setup for this "problem" and run separately for each file change:

esbuild.css.config.mjs

import esbuild from 'esbuild';
import { sassPlugin } from 'esbuild-sass-plugin';

const entryPoints = [
  "app/assets/stylesheets/application.scss",
  "app/assets/stylesheets/pdf.scss",
  "app/assets/stylesheets/public.scss",
];

async function build() {
  const ctx = await esbuild.context({
    entryPoints: entryPoints,
    bundle: true,
    outdir: 'app/assets/builds',
    sourcemap: true,
    loader: {
      '.ttf': 'file',
      '.woff': 'file',
      '.woff2': 'file',
      '.otf': 'file',
      '.eot': 'file',
    },
    plugins: [
      sassPlugin({
        loadPaths: ['node_modules'],
      }),
    ],
    logLevel: 'info',
  });

  if (process.argv.includes('--watch')) {
    console.log('🔄 [CSS] Watching for changes...');
    await ctx.watch();
  } else {
    console.log('📦 Building...');
    await ctx.rebuild();
    ctx.dispose();
  }
}

build().catch((e) => {
  console.error(e);
  process.exit(1);
});

And I added css scripts to package.json file

"build:css": "node esbuild.css.config.mjs",
"watch:css": "yarn build:css --watch",

esbuild.css.config.mjs file is in root path

The drawback is about remember to add the main css files on entryPoints

---

The loader parameter loads font files in my project context. I needed this when I migrated to Propshaft