Why aren't my CSS sourcemaps working? Showing wrong source file

My CSS sourcemaps have begun to show the wrong source file names. All I’ve done is put a google fonts @include line at the very bottom of main.scss, and add a couple lines to variables.scss to set the font.

Aside from that, everything in assets is default.

However, I’ve also switched bower.json to use bootstrap alpha 5 instead of alpha 4, so float-xx-left/right classes would work.

I just tried deleting bower_components and node_modules, running npm cache clean (i don’t know if it’s clean or clear. it was whichever command was suggested. i know the problem is not this command being incorrect).

The problem appears both when using gulp watch, and when simply running gulp and visiting the local development site.

Any ideas? Has anyone actually been able to get the sourcemaps working correctly?

I suppose I’m trying to hold off on starting over with a full clean project to mess with this stuff if I can avoid it, mostly because I have the strongest feeling that I’m going to end up with the same issue even if I do restart from a fresh copy.


Assuming I start with a new copy of all of the files and stuff, a “clean installation”, what is it that I keep doing that causes my css sourcemaps to start messing up? Am I not supposed to modify main.scss? Will changing the Bootstrap version cause this to happen?

This has been a problem for me with Sage since it first started including the css sourcemaps. I don’t think I’ve ever really had them working correctly for any extended period of time. Is that possible? If so, how can I do that?

Just an update. I’m not having much luck troubleshooting this, but I may have a lead. Chrome shows me the generated CSS file and says (from source map), so I’m trying to compare that to the generated css file in dist/styles.

I assume you’re talking about Sage 8. If that’s the case, then yes, source maps do work correctly. You could confirm by starting a new project and checking for yourself. That would help you figure out if it’s a problem with your setup, or your styles you write.

If a stock Sage theme works with source maps correctly, then continue on by copy-pasting styles from your project and checking the source maps, until you figure can narrow down where the issue is.

I’ll do a clean install when I get home.

In the meantime, my original question stands. Anyone able to get it working successfully?

Yes, of course.


I’ve had source maps begin to freak out in Safari (or, more accurately, Safari begin to freak out about source maps) with very large compiled CSS files, and I’ve found that, specifically, compiling .btn and .row classes add a LOT of additional size to the compiled output CSS. I don’t know why this is, but that’s when I start to notice Safari telling me the wrong source map info.