When I run gulp, the references to the scss sources work as expected when inspecting https://mysite.dev.
When I run gulp watch (https://localhost:3000/), the source is the main.css.
Any idea how to troubleshoot this?
Fresh install of latest Sage, following all setup instructions, no changes except my devurl in the manifest.json.
This is correct
Sage never loads any scss files on the front-end, ever.
edit: I just realized you’re talking about sourcemaps
Yeah sorry, I should have said sourcemaps.
It’s possible there’s another bug with the sourcemaps & gulp watch. I haven’t really tested it since the switch from gulp-minify-css to gulp-cssnano.
Can you get sourcemaps to work by reverting https://github.com/roots/sage/pull/1610/files?
Just fired up a fresh install here and it works fine :-/
Perhaps remove your node_modules/ and bower_components/ then run npm cache clear before re-installing.
I just tried that (npm cache clear and bower cache clean), but didn’t change anything. :-/
I switched to gulp-minify-css per those diffs; same results, other than gulp-minify-css was twice as fast as css-nano.
Strange that localhost and mysite.dev differ… does this suggest that something may be wrong on the server? I’m using VVV for this one. Does node on VVV need to match the local machine?
Ok, this is weird. Problem seems to be my Chrome browser. Just tested sourcemaps in Firefox, Safari, and Chrome on another mac, and they work.
I retried with no extensions, incognito, clearing cache… but still doesn’t work. Will reinstall.
So, this probably isn’t a sage issue, but if anyone has any tips on fixing this in my Chrome, please let me know.
I’m having the same issue with Sage 8.4.1 - fresh install and I didn’t make any changes that would affect the build process. Both in Firefox and in Chrome, it’s only referencing main.css.
It appears that the sourcemap file is not being generated since there is no sourcemap file in dist/styles/
Just as an fyi, my issue wasn’t sourcemaps actually. The sourcemaps were generated fine. My issue turned out to be a performance one - localhost/browsersync take 30 seconds to load, which seems to stop the sourcemaps from always loading in the Chrome web inspector. But 10% of the time they did load. I’ve not yet found the reason for this performance issue, but seems related to VVV loading localhost slowly.
Wish I could help your sourcemap generation issue, but I’m as clueless as you.
I too am having issues with source maps for the watch command.
If i just ‘gulp’ the source maps can be used. Between using watch and the css being injected into the doc the source maps aren’t there unless i just run gulp.
Did anyone ever figure this out? I’m working on a Sage 8.5.3 theme, and same issue; gulp shows sourcemaps in Chrome, but gulp watch does not :\
Edit: Looks like this is a known issue with using browsersync in Chrome over https https://github.com/BrowserSync/browser-sync/issues/639 