Grunt doesn't update main scss file

Question

I have a project that uses GruntJS with grunt-contrib-sass, grunt-contrib-watch and grunt-newer.

My main app.scss file imports a few .scss files with the @import dir

Answer 1

I think your watch tasks variable is backwards, you can check by opening terminal, going to the directory you would normally run grunt watch but try running newer:sass if that doen't work, try sass:newer if the later works change that line in your watch settings.

Also, if you only have one sass task you can just change it to:

watch: {
      css: {
        files: ['scss/**/*.scss'],
        tasks: ['sass']
        options: {
          spawn: false
        }
      }
    }

Just as a side note, it seems that your sass has needlessly complicated rename function, if you're just trying to take scss/**/*.scss and turn them into style/**/*.css you should be able to use this (taken from the grunt-contrib-sass readme):

grunt.initConfig({
  sass: {
    dist: {
      files: [{
        expand: true,
        cwd: 'scss',
        src: ['**/*.scss'],
        dest: 'styles',
        ext: '.css'
      }]
    }
  }
});

if you have files that use multiple dots eg: file.src.scss add extDot: 'last' to the files array