Eu tenho um projeto que usa o GruntJS com grunt-contrib-sass, grunt-contrib-watch e grunt-newer.

Meu arquivo principal app.scss importa alguns arquivos .scss com a diretiva @import como

@import "common / vars.scss";

Se eu fizer alterações no app.scss principal, tudo funcionará. O problema é que, quando faço alterações em um arquivo que está sendo importado (como vars.scss), o app.scss não é atualizado.

Esta é a minha tarefa de exibição:

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

E esta é a tarefa sass:

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';
          }
        }]
      }
    }

Alguma idéia de como alterar o Gruntfile.js para cobrir esse cenário também? :) Obrigado.