grunt contrib-sass sourcemap enable

Question

I can't get a lot of contrib-sass features to work in grunt. I dived into grunt a day ago and I found it really good.

Link to contrib-sass repo which says sourcemaps should be working: https://github.com/gruntjs/grunt-contrib-sass/commit/e85ee70ccb8839867172b57ca1378293291f8037

note: I have sass bleeding edge, and this feature works fine if I use: sass --watch --scss --sourcemap --no-cache with google chrome canary sourcemaps and Sass stylesheet debugging

here is my Gruntfile.js:

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd hh:mm:ss") %> */\n',

    concat: {
      options: {
        separator: '\n// New file\n',
        banner: '<%= banner %>'
      },
      develop: {
        files: [
          { src: ['js/develop/plugins.js', 'js/develop/main.js'], dest: 'js/concDev.js' }
        ]
      },
      vendor: {
        files: [
          { src: ['js/vendor/*.js', '!js/vendor/jquery-1.9.1.min.js', '!js/vendor/modernizr-2.6.2.min.js'], dest: 'js/concVend.js' }
        ]
      }
    },

    uglify: {
      options: {
        banner: '<%= banner %>'
      },
      develop: {
        files: [
          { src: ['<%= concat.develop.files[0].dest %>'], dest: 'js/concDev.min.js' }
        ]
      },
      vendor: {
        files: [
          { src: ['<%= concat.vendor.files[0].dest %>'], dest: 'js/concVend.min.js' }
        ]
      }
    },

    removelogging: {
      dist: {
        files: [
          { src: ['js/concDev.min.js'], dest: 'js/concDev.min.js' },
          { src: ['js/concVend.min.js'], dest: 'js/concVend.min.js' },
          { src: ['js/concDev.js'], dest: 'js/concDev.js' },
          { src: ['js/concVend.js'], dest: 'js/concVend.js' }
        ]
      }
    },

    jshint: {
      files: ['gruntfile.js', 'js/develop/*.js'],
      options: {
        globals: {
          jQuery: true,
          console: true,
          module: true,
          document: true
        }
      }
    },

    cssmin: {
      compress: {
        options: {
          banner: '<%= banner %>'
        },
        files: [
          { src: ['css/main.css'], dest: 'css/main.min.css' }
        ]
      }
    },

    imagemin: {
      dynamic_mappings: {
        files: [
          {
            expand: true,
            cwd: 'img/',
            src: ['**/*.png', '**/*.jpg'],
            dest: 'img/',
            ext: '.png'
          }
        ]
      }
    },

    sass: {
      compressed: {
        files: {
          'css/main.css': 'css/develop/main.scss'
        },
        options: {
          outputStyle: 'compressed'
        }
      },

      nested: {
        files: {
          'css/main.css': 'css/develop/main.scss'
        },
        options: {
          sourcemap: true,
          outputStyle: 'nested'
        }
      }
    },

    rsync: {
      deploy: {
        src: "./",
        dest: '<%= connection.dest %>', // i.e. "var/www"
        host: '<%= connection.host %>', // i.e. "user@server.com"
        recursive: true,
        syncDest: false,
        exclude: ["/node_modules", ".*"]
      }
    },

    watch: {
      options: {
        livereload: true
      },
      html: {
        files: '*.html'
      },
      js: {
        files: ['js/develop/plugins.js', 'js/develop/main.js'],
        tasks: ['jshint', 'concat:develop']
      },
      css: {
        files: 'css/develop/main.scss',
        tasks: ['sass:nested']
      }
    }

  });

  // Load Plugins
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-imagemin');
  grunt.loadNpmTasks("grunt-remove-logging");
  grunt.loadNpmTasks('grunt-sass');

  grunt.loadNpmTasks('grunt-rsync');


  // Task Lists
  grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'imagemin', 'sass:nested']);

  grunt.registerTask('server', ['watch']);
  grunt.registerTask('deploy', ['sass:compressed', 'rsync' ]);
};

Btw, as I said im totally new with grunt, if you find other bad practise in my code please let me know. Also great plugin names for ftront-end work always welcome, I saw there are many, only faminilar with a few contrib ones yet.

Note: Somewhy, a lot of sass options doen't work, for example: noCache, lineNumbers, debugInfo, outputStyle:'compact','expanded' (compressed, nested works oO)

~ ae

Answer 1

It's easy right now, SASS version 3.4.5 works with source maps very well and has some more options to set it up:

$ sass -h
Usage: sass [options] [INPUT] [OUTPUT]

Description:
  Converts SCSS or Sass files to CSS.

[...]

Input and Output:
--scss              Use the CSS-superset SCSS syntax.
--sourcemap=TYPE    How to link generated output to the source files.
                       auto (default): relative paths where possible,
                                       file URIs elsewhere
                       file: always absolute file URIs
                       inline: include the source text in the sourcemap
                       none: no sourcemaps
[...] 

So you can configure your Gruntfile.js e.g. like this:

[...]

sass : {
    dist : {
        files : {
            'example.css' : 'example.scss'
        },
        options: {
             sourcemap: 'auto'
        }
    }
}

[...]

Now if you run grunt sass task source maps are generated automatically.

Answer 2

I was able to get this to work using the following:
* one note: the map file doesn't get tracked anywhere so I didn't realize it was rewriting it until I deleted a version of the map and then I noticed that it was writing the file.

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dist: {
                options: {
                    style: 'expanded',
                    debugInfo: true,
                    sourcemap: true
                }, 
                files: {
                    'styles/styles.css' : 'styles/sass/styles.scss'
                }
            },
        },
        watch: {
            css: {
                files: '**/*.scss',
                tasks: ['sass'],
                sourceComments: 'normal'
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}

Answer 3

As of today (07/10/2013):

If you install pre version of sass

gem install sass --pre

and grunt-contrib-sass package, your config file will allow to generate sourcemaps.

If you use compass try using compass: true option in sass task config block or loadPath

Answer 4

Just to provide this as an actual answer, sourcemaps aren't available in sass stable yet. They're being worked on in an alpha release. The original question referenced a commit message that noted the code was being future-proofed.

As of 6/24/2013, sourcemaps aren't available in grunt-contrib-sass or grunt-contrib-compass.