How to compile all SASS files in a directory with Elixir?

Question

I'm using elixir to compile my scss files.

assuming that this is my folder structure:

- app.scss
- header.scss
- footer.scss
- home/
  - home1.scss
  - home2.scss

For one file I can use mix.sass('app.scss'); but what if for all files in my directory without need to add them one by one?

I've tried:

mix.sass('*.scss');
mix.sass('**/*.scss');
mix.sass(['*.scss']);
mix.sass(['**/*.scss']);

and the only file I can get is the public/css/app.css

How can I compile all files in order to get something like:

- app.scss
- header.scss
- footer.scss
- home/
  - home1.scss
  - home2.scss

Answer 1

I think the wildcard solution doesn't work at all. Have you tried to import your file dependencies, with @import "file2", and only process those files?

Assuming: home1.scss

@import "../app"
@import "../header"
@import "../footer"
// home1 css

home2.scss

@import "./home1"
// home2 css

with:

mix.sass('home1.scss');
mix.sass('home2.scss');

you'll generate only home1.css and home2.css with the dependencies style on them.

This way you'll improve your code and get a better control from dependencies.