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.
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' {} \;
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
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
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"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With