Search code examples
sasssource-mapslibsassgrunt-contrib-sass

sourcemap with grunt-sass points me to the wrong line


i work with libass and susy, with grunt and compass-importer. the base for the instalation of my projects are from http://zellwk.com/blog/grunt-sass-with-susy/

all was working fine until i've updated the files, now the sourcemap does not give me the exact line of the property from the scss file anymore. The example are on the print.

Instead of the sourmap point me to the line 941, it points me to the line 935

Instead of the sourmap point me to the line 941, it points me to the line 935 this is the image of the chrome dev tools

my grunt file is configured as such:

// Grunt-sass 
sass: {
  app: {
    // Takes every file that ends with .scss from the scss 
    // directory and compile them into the css directory. 
    // Also changes the extension from .scss into .css. 
    // Note: file name that begins with _ are ignored automatically
    files: [{
      expand: true,
      cwd: 'scss',
      src: ['*.scss'],
      dest: 'css',
      ext: '.css'
    }]
  },
  options: {
   importer: compass,
   sourceMap: true, 
   outputStyle: 'nested', 
   imagePath: "../",
 }

Solution

  • I think is because is pointing for your header the mother of all classes.

    your header it's exactly line 935.

    you are nesting to many classes, you should do max 3 levels and 50 lines.

    your grunt sass is a bit confuse you can do more simple like that:

    //src ===============================
            var src;
            config.src = src = {
                 sassMain        : 'scss/main.scss',
                 distFolder      : 'public/stylesheets/lovelycss.dist.css',
                 devFolder       : 'public/stylesheets/lovelycss.dev.css',
                 sassFolder      : 'scss/**/*.scss',
    
            };
    
    
    
    
    //distribution
                            sass.dist = {
                                options: { 
                                    style: "compressed",
                                    noCache: true, 
                                    sourcemap: 'none', 
                                    update:true
                                }
                                , files: {
                                    "<%= src.distFolder %>" : "<%= src.sassMain %>"
                                }
                            };
    
                        //development env.
                            sass.dev = {
                                options: { 
                                    style: "expanded", 
                                    lineNumber: true,
                                }
                                , files: {
                                    "<%= src.devFolder %>" : "<%= src.sassMain %>"
                                }
                            };
    

    i hope that can help you.