Compile multiple SASS files in multiple directories, into multiple CSS files in a separate, single directory

Question

I need to compile multiple sass files in one directory into multiple corresponding css files in another directory. Eg:

src/folder1/file1.scss  --compiles to--  public/file1.css
src/folder2/file2.scss  --compiles to--  public/file2.css

Here is the command I am using:

./src/*/*.scss ./public

Prior to attempting this, I was compiling all .scss files in place using just ./src/*/*.scss, and was getting the corresponding .css files in their respective directories. Trying to dump these in a different directory, however, is not working. What is happening instead is that one of the .scss files imports a .scss partial an import statement into the .scss file itself, a .scss.map file is created, and nothing else happens after that.

Does SASS even have this capability? I've tried different variations of the above command and occasionally I'll see an error saying that 'public' is a directory, which leads me to believe SASS doesn't allow a directory as the output. In fact, the documentation only provides a single output file as the example for compiling SASS (i.e. sass input.scss output.css).

I'm using NPM scripts as a build tool so please no Grunt, Gulp, etc.

*One other thing to note. I just tried using sass --watch instead of the normal compile command, and it sort of does what I need it to:

sass --watch src:public

The only issue I'm having with this is that it does not create only css files in public. Instead it creates a folder and a .css and .css.map file in the folder. It seems SCSS will add a path for each .scss file respective to the relative path traversed by watch. This solution would be ideal if it would not create this extra folder.

Answer 1

You can compile multiple sass files into multiple css files by specifying multiple source:output separated by a space like this:

sass --watch src/file1.scss:dist/file1.css src/file2.scss:dist/file2.css

You can change the src or output paths as needed.