I like to complile multipel SASS files with elixer (I have different stylesheets for the frontend and backend).
How do I do this in my gulpfile?
I tried to add .sass('frontend.scss').sass('backend.scss') or .sass(['frontend.scss', 'backend.scss']), but both do not work.
In the first setup for example is only the last file compiled.
elixir(function(mix) {
mix.sass([
'back/back-theme.scss',
'front/theme-animate.scss',
'front/front-theme.scss',
'front/theme-elements.scss',
'front/custom.scss'
])
});
Example, put sass files in array [1.sass, 2.sass, 3.sass]
All will be outputed in public/css folder
I had this working, but since an npm update, it no longer outputs multiple files. Any suggestions?
Call mix.sass() multiple times.
mix.sass('back/back-theme.scss', './public/css/back.css')
.sass('front/custom.scss', './public/css/custom.css');
Should this method work with gulp watch where it only compiles the files which have changed?
I've got three separate calls to mix.sass in my gulpfile, but even if I only change a file in one of them, then all three wait to be recompiled.
If I use the method above from roulendz of putting all three in an array, then it compiles all three into a single file.
Is there a way to process it where sass compiles everything in a given folder, where it just compiles everything with a full filename into the corresponding file in public\css, and ignores all the partial files which start with an underscore? So a.scss b.scss _mixins.scss _common.scss in a folder would make a.css and b.css.
It would be better if on "Gulp watch" Elixir would only be watching and compiling sass files that have "changed". It would cut down gulp's task time.
Please or to participate in this conversation.