No 'Sass' Targets Found - Error whilst using Grunt

Question

I've started trying to get to grips with the very basics of Grunt but when I try to run 'Grunt Sass' I get a "No 'sass' targets found" error. I can't see where I'm going wrong, anyone able to give me nudge in the right direction?

module.exports = function(grunt) {

//configuration
grunt.initConfig({
    // pass in options to plugins, references to files
    concat: {
        js: {
            src: ['js/*.js'],
            dest: 'build/script.js'
        },
        css: {
            src: ['css/*.css'],
            dest: 'build/styles.css'
        },
        sass: {
            dist: {
                files: [{
                    src: 'css/sass/styles.scss',
                    dest: 'css/styles.css'
                        }]
                   }
               },
    }

});

//Load Plugins
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-sass');


// register tasks
grunt.registerTask('concat-js', ['concat:js']);
grunt.registerTask('concat-css', ['concat:css']);

};

Answer 1

Your sass task is nested in concat which is why it can’t identify the sass task and is returning a No "sass" targets found. error.

Un-nest your sass task like such:

grunt.initConfig({
  concat: {
    ...
  },
  sass: {
    dist: {
      files: [{
        src: 'css/sass/styles.scss',
        dest: 'css/styles.css'
      }]
    }
  },
});

Sidenote: Looks like your css task is misplaced as well, but that shouldn’t affect grunt sass or grunt sass:dist from running; however, it will not find grunt sass:css. If you want both grunt sass:css and grunt sass:dist to be available, remove the css task from js and here’s how you should struct your sass task:

grunt.initConfig({
  concat: {
    js: {
      src: ['js/*.js'],
      dest: 'build/script.js'
    },
  },
  sass: {
    css: {
      src: ['css/*.css'],
      dest: 'build/styles.css'
    },
    dist: {
      files: [{
        src: 'css/sass/styles.scss',
        dest: 'css/styles.css'
      }]
    }
  },
});