Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Specify output file names when watching a whole directory with node-sass

Currently, I am able to specify file names when watching individual SCSS files, using node-sass build command in my package.json file:

"sass-build": "node-sass src/scss/main.scss dist/css/main.min.css --output-style compressed"

However, I need to watch a whole directory, as I am building multiple files. Is it possible to watch an entire directory with node-sass and manipulate individual file's names?

I need the following file names altered:

main.scss --> main.min.css

other.scss --> other.min.css

These files live in the same directory, so my build script now looks like this:

"sass-build": "node-sass src/scss -o dist/css --output-style compressed"

Is there an argument I am able to pass my script in order to do so? I wasn't able to find anything relevant in the documentation.

Thanks in advance.

like image 308
DanMad Avatar asked Apr 21 '20 04:04

DanMad


1 Answers

It seems that the feature you need does not exist as a built-in for the node-sass cli.

Assuming you work with bash, this may do the trick for you.

find src/scss -name '*.scss' -exec sh -c 'node-sass $0 dist/css/$(basename $0 .scss).min.css --output-style compressed' {} \;

How does it work

What this script does is getting the relative path of each file in the folder tree, whose file name matches the pattern '*.scss' and it executes for each path the node-sass command specifically on the file, defining the output by removing the '.scss' initial extension and replacing it with the '.min.css' extension as you wish.

For exemple let's say you have in the src/scss/ folder

  • myfile1.scss
  • subfolder/
    • myfile2.scss

This would execute :

node-sass src/scss/myfile1.scss dist/css/myfile1.min.css --output-style compressed 
node-sass src/scss/subfolder/myfile2.scss dist/css/myfile2.min.css --output-style compressed 

Optional

You can put this script in a file ./bin/scss-watcher.sh, make it executable and directly call it to wrap the logic.

"sass-build" : "./bin/scss-watcher.sh"
like image 142
lyderichti59 Avatar answered Sep 23 '22 13:09

lyderichti59