gwyn0431's avatar

Laravel 5.4. How to automatically compile all .scss files in directory (recursively) into one css file.

Hi everyone, i want to compile all of my .scss files in folder into one all.css file with immediate synchronization (and automatic recompile and all.css rebuild, if some of .scss files was changed). Laravel Mix does't provide any working solution. The best i can do, is to pass it and array of all my .scss files and merge them into one .css file, but then i have to do it manually (and yet i dunno how to configure synchronization.). Can anyone, please, provide me a good solution how to automatically compile all .scss files in the folder (recursively) into one all.css file, with immediate synchronization after any of .scss file in folder was overwritten. I was able to attain this with PHPStorm, using File Watchers. I have one watcher to automatically compile all .scss files into .css files using compass, and one using bash 'cat' command to combine all css files in one all.css. But, unfortunately, it takes me about 4 seconds from any changes in .scss file appears in all.css, and that's a bit too much. Thanks!

0 likes
5 replies
alenabdula's avatar
alenabdula
9 years ago
Best Answer
Level 13

I would create all.scss file, import other SCSS files and just compile all.scss. I wouldn't recommend importing things automatically/recursively since C in CSS stands for cascading, meaning order in which you import things matter.

Something like this:

// `all.scss` file
@import '_variables';
@import '_functions';
@import '_mixins';
@import '_media-queries';
// etc...

const { mix } = require('laravel-mix');

mix.sass('resources/assets/sass/all.scss', 'public/css');

Hope that helps. Best, Alen.

2 likes
gwyn0431's avatar

Thanks for answers! Alan, i got you. So, i should include files manually, as i want to control an order of adding css styles in my all.css. And with this principle, i only need my File Watcher for synchronized compile.

alenabdula's avatar

So, i should include files manually, as i want to control an order of adding css styles in my all.css.

Yes

i only need my File Watcher for synchronized compile.

Laravel Mix will automatically watch all the files you are importing. So when you save changes, it will re-compile.

Please or to participate in this conversation.