connecting grunt-contrib-sass to yeoman and grunt-contrib-watch

Question

Very similar to this question.

I've installed the node lib and have it in my package.json:

"devDependencies": {
  ...
  "grunt-contrib-sass": "~0.6.0"
}

and have a block in my Gruntfile.js:

grunt.initConfig({
  ...
  sass: {
    dist: {
      files: [{
        expand: true,
        cwd: '<%= yeoman.app %>/styles/scss',
        src: ['scss/{,*/}*.scss'],
        dest: '<%= yeoman.app %>/styles/css',
        ext: '.css'
      }]
    }
  }

My file structure looks like so:

app
  styles
    css
    scss

And I have the sass gem installed.

I'm sure I'm missing something very basic here that needs to be included. My yo serve doesn't seem to be putting the files in the right place to be caught up and used.

I imagine theres something I'm missing in the watch block, but I'm not sure what that is.

Answer 1

so my Gruntfile.js needed to look like this:

    sass: {
      dist: {
       files: [{
         expand: true,
         cwd: '<%= yeoman.app %>/styles/scss',
         src: ['*.scss'],
         dest: '.tmp/styles/',
         ext: '.css'
       }]
     }
   }

and I needed to add sass to the styles task in the watch block.