With Rails 7, if I have multiple outputs for my build:css script in package.json, --watch` no longer works, how can I output multiple files and still enable the script to rebuild the css when file changes are made?

Example, this does not work:

"build:css": "sass ./app/assets/stylesheets/application.sass.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules && sass ./app/assets/stylesheets/active_admin.sass.scss ./app/assets/builds/active_admin.css --no-source-map --load-path=node_modules"

While if I remove the && and everything that follows like so:

"build:css": "sass ./app/assets/stylesheets/application.sass.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"

That does work, and the files are observed for changes and rebuilt, what am I doing wrong?

CodePudding user response：

Because --watch flag is just appended to build:css command and it ends up executing this

sass ... && sass ... --watch

It compiles application.scss and then watches admin.scss.

This is the correct syntax:

https://sass-lang.com/documentation/cli/dart-sass#many-to-many-mode

sass [<input.css>:<output.css>] [<input/>:<output/>]...

"build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css ./app/assets/stylesheets/active_admin.sass.scss:./app/assets/builds/active_admin.css --no-source-map --load-path=node_modules"