Hello,

BrowserSync watches all my imported sass stylesheets so that the changes are reflected in the production css file. However, the gulp action refreshes the browser and only after does it re-compile the css. So my changes are always a refresh behind.

e.g.
1. body tag background color set to pink in variables.scss
2. run gulp watch, background shows as pink in browser
3. change color to blue in variables.scss, save file
4. sass compiles, production css file shows blue but,
5. browser still displays pink


elixir(function (mix) {
    mix.sass(theme + '.scss', 'css/' + theme + '.css')
        .browserSync({
            browser: 'google chrome',
            proxy: 'tmn.test',

            // watch these files   
            files: [
                'templates/*.html',
                'layouts/*.html',
                'sass/*/*.scss'
                ],

            // edit in-browser notifications    
            notify: {
                styles: {
                    top: 'auto',
                    bottom: '12px',
                    right: '12px'
                }
            }
        });

    // mix.version('css/' + theme + '.css');
});
Answered by mar627! Go to answer.