Scss files don't seem to be building correctly

Hi all,

I’m new to Sage and from what I’ve seen it looks great however I’m having some trouble getting started. Its been a long while since I’ve done web dev so a lot has changed - hence why I thought Sage would be a good place to start (at the deep end I know though!!).

Anyway…I’ve got my local MAMP environment set up with Wordpress and Sage running correctly AFAIK, but I seem to be having some problems with the build pipeline.

If I use gulp watch then my site fires up successfully - I’m serving my devUrl via a vhost from MAMP to in my manifest.json file.

All seems to be ok, editing PHP files happily causes a BrowserSync refresh, however whilst editing a SCSS file triggers gulp the main.css file is not updated and BrowserSync is not fired.

This is the gulp watch log

[22:54:23] Starting 'wiredep'...
[22:54:23] Finished 'wiredep' after 210 ms
[22:54:23] Starting 'styles'...
[BS] 1 file changed (main.css)
[22:54:29] Finished 'styles' after 5.04 s

If I do a gulp --production the files seem to be generated correctly.

I’ve just checked and .js files are doing something similar but different - they trigger a BrowserSync but they also do not update without a gulp --production

Have I failed to configure something?

1 Like

If you’ve done a gulp --production you’ll need to rm -rf dist and then gulp again before you gulp watch to clear out the versioned copies of the compiled files.


Thanks a lot, that explains it and solves the problem - makes a lot of sense, I guess I should have read up a bit more on gulp before trying something so ambitious!

I’ll be back with more problems Im sure!

I’d love to see some a good example of gulp used in the real world for a theme, are their any online. I’m mainly looking for how people actually build out the CSS and JS files for their theme.


This is correct, only thing to note is you don’t need to delete the dist folder manually, running gulp or gulp --production will do that automatically for you with the clean task.