node-sass electron structural recursive

Question

I have following structure:

.app
..assets/css/style.scss
..assets/css/partials/fonts.scss

I would like to watch for any changes in css/*, and from style.scss - compile it down to style.css. It's important for style.scss to be able to work with @imports.

I have following in my package.json

"scripts": {
    "start": "concurrently \"npm run sass:compile\" \"electron .\" \"npm run watch:sass\"",
    "sass:compile": "node-sass assets/css/style.scss -o assets/css",
    "watch:sass": "node-sass assets/css/style.scss -o assets/css --output-style compressed --watch assets/css --recursive"
  },

Everything else is standard electron.js workflow, main.js, render.js and index.html But I can't make it to watch files in css/partials/*. Just by editing style.scss alone, the file-watcher is working, but I would like it to be recursive.

Answer 1

You should feed node-sass with a input directory to watch instead of a file if you want recursive behaviour:

node-sass --watch --recursive --output-style compressed --output assets/css assets/css

Last argument is the input directory here.