Unable to get Chrome inspector to link to SCSS source map file generated from Web Essentials

I am trying to get Chrome's developer tools to recognize and use my scss map file so I can more easily debug my scss styles. It seems like Chrome, for some reason, is not picking up on the styles.css.map file and so it is only showing me the generated css styles in the inspector and not exposing the scss files.

tools I'm using:

• visual studio 2013
• Web essentials
• IIS
• chrome

current configurations:

• web essentials sass compilation is configured to generate css and css.map files and seems to be working correctly. The css and map files are generated in the same directory as the scss file and updated on save. view my web essentials settings here
• chrome settings are set to enable css source maps and to auto-reload generated source maps view chrome settings here

file structure

I've set up a very simple file structure to try to narrow down the issue and eliminate any extra complications that my main application could introduce:

/index.html
/styles.css
/styles.scss
/styles.css.map

UPDATE 1:

I manipulated the url to see if I could go right to the files and it looks like the styles.css.map file is available but the styles.scss file is not available. so I guess VS or IIS are not serving those files. I'm guessing this is because of some configuration that needs made in IIS or VS?

UPDATE 2:

I found out that the mime type needs to be set up in visual studio or IIS in order for it to recognize the scss file type. I set that up in my web.config and now it is completely working in FireFox but is still not working in Chrome for some reason. But I CAN access all the .map and .scss files if I go to them directly by url. Now I need to figure out why this isnt working in chrome.

I have finally figured out the issue! in Tools > Options > Web Essentials > SASS, I set "Use Ruby Runtime" to True and it works!