Search code examples
javascriptcssnode.jssassgrunt-contrib-watch

using updating my css file using grunt


Please i am not sure if i misunderstood what grunt is for. I was expecting to write .scss files and grunt take what i write in sass and update them in my .css file. I learnt to configure my grunfile.js here . However, after running grunt watch , grunt keeps watching and excute my .scss file when ever i change it. However, contrary to my expectation, it does not update my .css file. Below is my gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig ({
    sass: {
      dist: {
        files: {
          'public/stylesheets/style.css' : 'sass/style.scss'
        },
        options: {
          loadPath: ['bower_components/foundation-apps/scss']
        }
      }
    },
    watch: {
      source: {
        files: ['**/*.sass','**/*.scss'],
        tasks: ['sass'],
        options: {
          livereload: true, // needed to run LiveReload
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', ['sass']);
};

In my page, i only reference the style.css and expect it to be updated with my .scss content. What am i missing please? Any help would be appreciated.


Solution

  • Try to add watch to the default task:

    grunt.registerTask('default', ['watch', 'sass']);