CODEWITHSUNDEEP
sass
skwny
skwny

Reputation: 3170

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

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.

Upvotes: 7

Views: 14238

Answers (2)

Marcel Mejia
Marcel Mejia

Reputation: 121

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.

Upvotes: 11

Nathaniel Flick
Nathaniel Flick

Reputation: 2963

You have to tell the sass watch what file you want it to output, just like this: 

sass --watch style.scss:style.css

You can even set it to output a compressed css file (the .map file happens automatically for each css): 

sass --watch style.scss:style.css --style compressed

I usually go to one file, but theoretically you can watch different scss files and compile them to separate css files, not sure why you'd want to?, but it can be done.

For anything you want to group, import the related files to a scss file then compile it down to one file, then repeat these steps.

(Note: I'm running the sass gem for the above commands in Node.)

Upvotes: 4

Related Questions