laravel gulp watch not updating sass css files

Question

In our Laravel 5.1 app, we are using elixir and gulp to compile css from sass. When we run just gulp, everything compiles correctly and the css files are up to date. Yet, when we run gulp watch, and we update a .scss file, Gulp says Sass Compiled successfully, but the css files do not have the newest change. What are we doing wrong?

added gulpfile.js contents:

var gulp = require('gulp');
var elixir = require('laravel-elixir');

elixir(function(mix){

mix.copy("vendor/kwizer15/jquery/jquery.js",     "resources/assets/js/jquery.js")
    .copy("vendor/kwizer15/jquery-ui/dist/jquery-ui.js",     "resources/assets/js/jquery-ui.js")
    .copy("vendor/kwizer15/jquery-ui/dist/jquery-ui.css",     "resources/assets/css/jquery-ui.css")
    .copy("vendor/kwizer15/jquery-ui/dist/images/**", "public/images/")
    .copy("vendor/kwizer15/highcharts/highcharts.js",     "resources/assets/js/highcharts.js")
    .copy("vendor/fortawesome/font-awesome/css/font-awesome.css",     "resources/assets/css/font-awesome.css")
    .copy("vendor/fortawesome/font-awesome/fonts/**",     "public/build/fonts/")
    .copy("vendor/twbs/bootstrap/dist/css/bootstrap.css",     "resources/assets/css/bootstrap.css")
    .copy("vendor/twbs/bootstrap/dist/js/bootstrap.js", "resources/assets/js/bootstrap.js")
    .copy("vendor/twbs/bootstrap/dist/fonts/**", "public/assets/fonts/")
    .copy("vendor/rjacobsen/jquery-nestable/src/jquery.nestable.css",     "public/css/jquery.nestable.css")
    .copy("vendor/rjacobsen/jquery-nestable/src/jquery.nestable.js",     "public/js/jquery.nestable.js")
    .copy("bower_components/mjolnic-bootstrap-colorpicker/dist/css/**",     "public/css/")
    .copy("bower_components/mjolnic-bootstrap-colorpicker/dist/img/**",     "public/images/")
    .copy("bower_components/mjolnic-bootstrap-colorpicker/dist/js/**",     "public/js/")
    .scripts(
        [
            'jquery.js',
            'jquery-ui.js',
            'bootstrap.js',
            'highcharts.js'
        ]
    )
    .styles(
        [
            'font-awesome.css',
            'bootstrap.css',
            'jquery-ui.css',
            'custom/nav_styles.css'
        ]
    )
    .phpUnit()
    .version(["css/all.css", "js/all.js"]);

mix.sass(['reseller_settings.scss'],     'public/css/reseller_settings.css');
mix.sass(['menu_builder.scss'], 'public/css/menu_builder.css');
mix.sass(['nav_menu.scss'], 'public/css/nav_menu.css');


});

You'll want to post the contents of your grunt file. I'd suspect you've incorrectly configured your css output for the watch task. — fontophilic

Fernando Dias Fernando Dias · Accepted Answer · 2015-09-24T13:28:05

I had the same problem. But I moved the files into the same directory as the main file

Before: resources/assets/custom

After: resources/assets/sass/custom

laravel gulp watch not updating sass css files

1 Answers