7

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.

skwny
  • 2,930
  • 4
  • 25
  • 45
  • 1
    Did you try `sass --update scss:css` in case that you are in folder that contain **scss** and **css** folder such as **assets/scss**, **assets/css**? referrer: https://stackoverflow.com/questions/19439914/how-to-convert-directory-sass-scss-to-css-via-command-line – vee Jun 29 '17 at 08:56

2 Answers2

10

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.

Marcel Mejia
  • 101
  • 1
  • 5
4

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.)

Nathaniel Flick
  • 2,902
  • 2
  • 22
  • 31
  • 2
    I need to compile multiple .scss files into multiple .css files, not a single .scss file into a single .css file. – skwny Mar 05 '17 at 18:36
  • Correct, I'm pretty sure (not 100%) that you can watch multiple scss files at once (in different terminal windows), and set their outputs to different css files. – Nathaniel Flick Mar 05 '17 at 18:39