CSS sourcemap's path is incorrect.

[everthis]

can't find the .scss file.
In the console the path is: http://localhost:9000/app/styles/main.scss
which should be: http://localhost:9000/styles/main.scss
I hope to hear some workaround. Thanks.

[eliberov]

same issue here

[everthis]

Hi, @eliberov ,I have found a workaround:just set the .tmp directory's path inside app folder.
problem solved.

[eddiemonge]

What options did you set? Did you use Ruby Sass or node-sass?

[everthis]

1,no customized settings,just a fresh webapp;
2,node-sass

[stevemao]

confirm that Ruby Sass has the same problem.

[mvaldesdeleon]

Hi All. I've been able to solve this issue by adding grunt-sed to the mix.

Sadly, this grunt plugin doesn't support glob expansion in the path attribute, so I cannot force it to process just the css.map files.

        // Fix the source-maps
        sed: {
            sourcemap: {
                path: '.tmp/styles/',
                recursive: true,
                pattern: '"([^"]*)/<%= config.app %>\\/styles\\/([^"]*\\.scss)"',
                replacement: '"$1/styles/$2"'
            }
        },

I have added this task to run after autoprefixer on the serve task, which is where I'd need it.

I've noted that the grunt-sed plugin is quite outdated. The same solution could be implemented via the grunt-contrib-copy plugin already present, I believe. Yet another implementation could be achieved with the grunt-replace plugin.

In case this solution seems viable, I could supply my current version.

[oori]

Here's another workaround: yeoman/generator-angular#574 (comment)

[htanjo]

I fixed this issue in another approach.
I added a route to resolve the reference to the connect server.

connect: {
  ...
  livereload: {
    options: {
      middleware: function(connect) {
        return [
          connect.static('.tmp'),
          connect().use('/bower_components', connect.static('./bower_components')),
          connect.static(config.app),
          // Resolve the reference from map file.
          connect().use('/' + config.app + '/styles', connect.static('./' + config.app + '/styles'))
        ];
      }
    }
  },
  ...
},

It works fine with both Ruby Sass and Libsass.
When you use Libsass, you should update grunt-sass to v0.16.0+ at first.

If this patch is welcome, I'll send a pull request.

[djmtype]

Any fix for getting (grunt-contrib-sass) Sass source maps to show up in Web Inspector?

Tried adding connect().use('/' + config.app + '/styles', connect.static('./' + config.app + '/styles')) as specified by @htanjo. But, that made no difference here.

The sourcemap is being generated to .tmp > styles > main.css.map. However, it's not showing up in web inspector when running grunt serve.

Am I missing something?

[htanjo]

Hi @djmtype, are you using the master branch of yeoman/generator-webapp?
The published version (v0.5.1 in npm) has another issue, Autoprefixer removes the sourcemap comment. This fix yeoman/generator-webapp@58cb3b9 is not released for now.

I hope this helps.

[djmtype]

@htanjo Now, that's a wonderful thing. Cheers!

[silvenon]

The fix is released in v0.6.1.