Inaccessible file path in *.css.map

[wiredmind]

SASS Source map file, e.g., main.css.map, refers the source path as: "../../app/_scss/main.scss", however this file path isn't accessible by the browser. From the browsers point of view main.scss lives under /_scss/. Adjusting Gruntfile to include '.' in connect.livereload.options.base eradicates the problem:

connect: {
  options: {
    port: 9000,
    livereload: 35729,
    // change this to '0.0.0.0' to access the server from outside
    hostname: 'localhost'
  },
  livereload: {
    options: {
      open: true,
      base: [
        '.tmp',
        '.jekyll',
        // add this to fix 404 in sass source maps
        '.',
        '<%= yeoman.app %>'
      ]
    }
  }
}

[robwierzbowski]

I haven't played around with sourcemaps yet. I'd prefer to generate sourcemaps into tmp and not reference anything outside of the tmp/app/dist folders when you're in the browser. If you can get that to work PRs gratefully accepted.

[wiredmind]

The issue doesn't lie with the path to the source map (.css.map), but with the path to the source itself (.scss). The source map file is currently properly generated and served out of .tmp directory, but the browser must be allowed access to the source file if browser editing of source files is to work. To serve the source file out of .tmp would complicate and increase the time needed to run grunt tasks.

[robwierzbowski]

Yeah, this is a tricky problem. The solution would be the same for any Yeoman generator — is there a generator that currently has sourcemaps working?

[mohamnag]

what @wiredmind suggested works very well. The fact is that, if you need SOURCEmapping, then the name says all, you have to give access to the source!