CODEWITHSUNDEEP
sassgruntjsnpmzurb-foundationlibsass
Dragod83
Dragod83

Reputation: 2327

Foundation grunt/libsass sourcemap give wrong path when inspected

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 chrome inspector

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?

Upvotes: 1

Views: 879

Answers (2)

VanAlbert
VanAlbert

Reputation: 2469

There appears to be an issue with sourcemaps and libsass, node-sass or grunt-sass, depending on which thread you're following:

https://github.com/sass/node-sass/issues/619

https://github.com/sindresorhus/grunt-sass/pull/146

You might try backgrading your CLI tools as per this:

https://github.com/zurb/foundation/issues/6129

IMHO this is indicative of the chaos that web development CLI tools has become, whereby one spends more time getting things to work than actually working.

In general, one really needs to specify exactly which version of all the CLI tools (i.e. grunt, sass, lib-sass etc etc etc) one is currently running when posing a question like this, otherwise a useful answer is unlikely.

Upvotes: 0

NateW
NateW

Reputation: 2121

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!

Upvotes: 1

Related Questions