Tengo un proyecto que usa GruntJS con grunt-contrib-sass, grunt-contrib-watch y grunt-newer.

Mi archivo principal app.scss importa algunos archivos .scss con la directiva @import como

@import "common / vars.scss";

Si hago cambios en el app.scss principal, todo funciona. El problema es que cuando hago cambios en un archivo que se está importando (como vars.scss), la aplicación.scss no se actualiza.

Esta es mi tarea de vigilancia:

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

Y esta es la tarea sass en sí:

sass: {
      dist: {
        options: {
          style: 'compressed',
          noCache: true
        },
        /* looks for every .scss file in the scss folder (checks nested folders too), 
         * compile it and create another file wit the same name in the style folder */
        files: [{
          expand: true,
          cwd: 'scss',
          src: ['**/*.scss'],
          dest: 'style',
          rename: function (dest, src) {
            var folder    = src.substring(0, src.lastIndexOf('/'));
            var filename  = src.substring(src.lastIndexOf('/'), src.length);

            filename  = filename.substring(0, filename.lastIndexOf('.'));

            return dest + '/' + folder + filename + '.css';
          }
        }]
      }
    }

¿Alguna idea de cómo cambiar Gruntfile.js para cubrir este escenario también? :) Gracias.