Foundation grunt/libsass sourcemap give wrong path when inspected

Question

I just setup a new project to test the libsass.

Installed Foundation, bower and grunt.

The project is running fine with grunt watch.

Then I open the project in Chrome -->DevTools.

I'm inspecting the css generated by the default app.scss,

All my style are mapped to _visibility.scss, when those stlye are actually in app.scss

My Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    sass: {
      options: {
        includePaths: ['bower_components/foundation/scss'],
        sourceMap: true,
        debugInfo: true
      },
      dist: {
        options: {
          outputStyle: 'nested'
        },
        files: {
          'css/app.css': 'scss/app.scss'
        }        
      }
    },

    watch: {
      grunt: { files: ['Gruntfile.js'] },

      sass: {
        files: 'scss/**/*.scss',
        tasks: ['sass']
      }
    }
  });

  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');

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

Something wrong in my configuration?

Answer 1

It has to do with the way your Gruntfile is configured. Under your sass options you have the sourceMap: true this is mapping your compiled css back to the sass partials. If you change the to sourceMap: false everything should work the way you expect it to.

sass: {
      options: {
        includePaths: ['bower_components/foundation/scss'],
        sourceMap: false,
        debugInfo: true
},

Hope that works for you!