We are currently using System.Web.Optimization to bundle both js/css files into one js or css bundled file called CacheBundle_(plus hash here). It is really hard to debug css changes without knowing exactly where the styles are located. So I am trying to figure how to get source maps to work properly.

In the compilerconfig.json.defaults, I have the sourceMap set to true and the sass files are generating the inline source map code (example):

/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAiQ29udGVudC9DZW50cml4L3Njc3MvbWFpbi5jc3MiLAoJInNvdXJjZXMiOiBbCgkJIkNvbnRlbnQvQ2VudHJpeC9zY3NzL21haW4uc2NzcyIKCV0sCgkibmFtZXMiOiBbXSwKCSJtYXBwaW5ncyI6ICJBQUFBLEFBQUEsS0FBSyxDQUFDO0VBQ0osZ0JBQWdCLEVBQUUsR0FBRyxHQUN0Qjs7QUFFRCxBQUM2QixtQkFEVixDQUNqQiwwQkFBMEIsQ0FBQyxJQUFJLENBQUM7RUFDOUIsVUFBVSxFQUFFLElBQUksR0FDakI7O0FBSEgsQUFLRSxtQkFMaUIsQ0FLakIsQ0FBQyxDQUFDO0VBQ0EsV0FBVyxFQUFFLEdBQUcsR0FDakI7O0FBUEgsQUFTK0IsbUJBVFosQ0FTakIsMEJBQTBCLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztFQUM3QixVQUFVLEVBQUUsQ0FBQztFQUNiLEtBQUssRUFBRSxPQUFPO0VBQ2QsV0FBVyxFQUFFLENBQUM7RUFDZCxRQUFRLEVBQUUsUUFBUSxHQU1uQjtFQW5CSCxBQVMrQixtQkFUWixDQVNqQiwwQkFBMEIsQ0FBQyxDQUFDLENBQUMsQ0FBQyxBQU01QixTQUFVLENBQUM7SUFDVCxjQUFjLEVBQUUsTUFBTTtJQUN0QixPQUFPLEVBQUUsWUFBWSxHQUN0QiIKfQ== */

But they are not showing up on any of the pages of the site.

I am fairly new to ASP.NET, so definitely could use some help on this. Also not sure if it is better to use grunt/gulp for minification/source maps over the bundle tools in WebOptimization either. Thanks!