How to run node-sass in watch mode?

[gianpaj]

I tried adding -w option like this

@@ -9,11 +9,11 @@
     "eleventy:default": "npx eleventy",
     "eleventy:watch": "npx eleventy --watch",
     "styles:prod": "node-sass src/styles/ --output dist/styles/ && postcss ./dist/styles/*.css --replace",
-    "styles:dev": "node-sass src/styles/ --output dist/styles/ --source-map true --source-map-contents true && postcss ./dist/styles/*.css --replace",
+    "styles:dev": "node-sass src/styles/ -w --output dist/styles/ --source-map true --source-map-contents true && postcss ./dist/styles/*.css --replace",
     "scripts:prod": "webpack --mode=production",
     "scripts:dev": "webpack --mode=development",
     "serve": "light-server -c .lightserverrc",
-    "dev": "npm-run-all clean styles:dev scripts:dev eleventy:default --parallel eleventy:watch serve --print-label",
+    "dev": "npm-run-all clean scripts:dev eleventy:default --parallel styles:dev eleventy:watch serve --print-label",
     "dev:debug": "DEBUG=* npm run dev",
     "build": "run-s clean styles:prod scripts:prod eleventy:default --print-label"
  },

but the index.css file doesn't get generated in the first build

[styles:dev    ]
[styles:dev    ] > gian-blog@1.0.0 styles:dev /Users/gianfranco/github/gianpaj/gian.blog
[styles:dev    ] > node-sass src/styles/ -w --output dist/styles/ --source-map true --source-map-contents true
[styles:dev    ]

$ ls -lah dist/styles
total 8
drwxr-xr-x   3 gianfranco  staff    96B Sep 28 01:38 .
drwxr-xr-x  10 gianfranco  staff   320B Sep 28 01:38 ..

[ianrose]

@gianpaj the file watching to trigger styles:dev npm script is handled via lightserver here: https://github.com/ianrose/deventy/blob/master/.lightserverrc#L9

On first run of npm run dev, node-sass is run via styles:dev. Then when .scss are changed lightserver runs node-sass again via styles:dev. So node-sass doesn't need to run in watch mode to re-build changes to Sass.

Are you trying to handle a unique scenario that requires node-sass to be in watch mode?

[gianpaj]

oh, thanks! I see. I wasn't actually using lightserver as I was trying to add the tools you added to this repo into the eleventy-base-blog.

So, I was using eleventy --watch.

I'll try using lightserver and report back. Thanks!

[gianpaj]

That worked! thank you so much :)
FYI I remove the postcss in the styles:dev script since I don't think there's a need for it while developing ¹ and it makes the reload a bit faster.

1: unless you're developing and testing in other browsers that need the auto prefixing