The documentation for node-sass is admittedly a little simplistic when using from the command line. I'm currently interested in using NPM Scripts as my build tool.
I have a project that has many components organized by feature. Each feature is a separate folder. There are larger components that contain smaller components, and any number of these will have their own .scss files.
The problem I'm having is that the docs aren't clear about how one would use node-sass to easily compile down all these files down to one file.
There is a way to compile the .scss files from one directory and put into another, but this keeps them as individual files. There is another suggestion that uses cat cat <input> | node-sass > <output> but cat is not recursive, nor does it use globs so the most you'd get is one level's worth of css.
Is there a way to use node-sass such that it can recursively look through all the files of a given directory and compile them into a single css stylesheet?
The best way I've found so far is kinda obtuse.
You use find to recursively find all the right files, then that gets output to cat which puts all that together, then finally to node-sass and output to the final file.
find src/apps/section -name '*.scss' -print0 | xargs -0 cat | node-sass > ./dist/css/section.css
Ideally, node-sass should accept a glob and operate on the results of that, but it's either not mature enough yet, or the team isn't focused on creating this functionality. IMO, any kind of compiler, be it for html templates, JS transpilation or minification or whatever should be able to accept a glob and output a single file. Doesn't seem like an edge case... but what do I know.
Node-sass does have a recursive option, but the current docs say that is only for watching. There is a discussion about this option, but there are stated reasons why multi-file compilation isn't a targeted feature (sourcemaps, etc). :/
I'd personally like to have more tools have better or more advanced file handling capability and let me delegate all my watching to a single script like npm-script-watcher. It watches, and triggers scripts, that's it. One file change can trigger a single-run lint, build and test. It seems better than a watcher flag for the linter, a watcher flag for the builder and a watcher for the tester and then duplicate scripts for each in case I only want to run the lint, build or test once without starting its watch functionality.