How to get the output from node-sass to postcss autoprefixer

Question

How do I use the output from node-sass to pass through postcss autoprefixer.

I'm not looking to use any webpack or gulp.

I'm purely using the cli from the node packages

This is my current npm script

node-sass --watch ./src/scss --output ./dist/assets/css | postcss ./dist/assets/css/app.css --use autoprefixer --output ./dist/assets/css/app-dist.css

Everything works only if I output to the same folder with a different name. But it doesn't work if I wish to output to the same name.

So the flow is scss -> css -> autoprefixer -> compiled.css

Occupancy

Were you able to find a solution for this? – Carine

Answer 1

There is no node-sass api available that would allow you to do this through cli I think.

I ended up running node-sass-chokidar and postcss in parallel, with an intermediate temp file created by node-sass, its not pretty but it gets the job done:

node-sass-chokidar ./root.scss ./tmp/root.css --watch --source-map-embed --source-map-root file://${PWD}/ &
P1=$ postcss -w ./tmp/root.css -o ./a-very-long-path-lalala/root.css &
P2=$! wait $P1 $P2

This allows you to terminate both with ctrl+c. Also you can move your scripts to a external file using i.e. scripty so you package.json scripts stay reasonably short.

Also you could consider using gulp or grunt.

Brake

Answer 2

The problem is discussed here: https://medium.com/@rostyslavbryzgunov/problem-of-watching-scss-f5c4225802fb The author of this post created a NPM package to solve it: https://github.com/kottenator/node-sass-watcher

I haven't tried this package, since it hasn't been updated for three years now.

I also struggled with this seemingly simple problem of using node-sass and postcss (with autoprefixer) for a long time, and I researched and tried a lot. In the end I just accepted having to run node-sass in watch mode and writing the css files in a temp directory, which postcss watches and then writes the css files (including prefixes) to the dist directory. If you don't use the temp directory, and let postcss watch and then overwrite the css files that node-sass generates, you will end up in an infinite loop, where postcss overwrites the file it watches over and over again. You can get around this if you use the --poll option of postcss, but this proved also to be unreliable (I still got infinite loops sometime), and it slows down the build process.

The only reliable way to get around this is to not use node-sass and postcss in watch mode, but to use e.g. chokidar to watch the sass files and then run node-sass and afterwards postcss once. (Here's an example: https://github.com/hellobrian/sass-recipes/tree/master/node-sass ) Then main downside is that this is significantly slower, probably because node-sass has to start up every time instead of keep running in watch mode. (On fast machines this may be fine, but on my 2013 MacBook Pro this adds 2-3 seconds after every change in an sass file.)

(I know that this is not a high quality answer, but since this question didn't get a lot of attention anyway, it may still be useful.)

Cranio