As the title suggests, i cannot get the LESS source maps working. I can see the line at the end of my min.css, and can also see the .map file, but in Chrome dev tools it still shows the min.css info, not the LESS.
I am using WAMP on Windows 8.1 - any ideas?
Are the paths right? The defaults in the Gruntfile use /app/themes/roots/ - did you update them based on your site? (e.g. /wp-content/themes/example/).
What browser are you using + what version?
Do you happen to have this up somewhere that we can access to see?
Hi Ben, you can take a look here:
http://nbwebdesign.com.au/tom/
I have all the paths correct, am using the latest version of Chrome
Cheers
Your source map url is wrong. Check the last line of main.min.css.
You mean?:
wp-content/themes/tomcampbell/assets/css/main.min.css.map
Ah, so it needs to be?:
assets/css/main.min.css.map
If so, i forgot about roots changing the paths 
The rewrites were removed from Roots and put into a plugin. Your site is in a subfolder (tom) not the root so you need to prepend this to the url.
I also think the source is relative to the stylesheet so just main.min.css.map could work.
Oh, i didnt realise that RE the rewrites - thanks
Will try your other suggestions this evening.
Well, i tried adding “tom” to my path, and also tried “main.min.css.map” only in the sourceMapFilename, but still no joy.
sourceMapFilename: ‘assets/css/main.min.css.map’,
sourceMapRootpath: ‘tom/wp-content/themes/tomcampbell/’
If i go to “http://nbwebdesign.com.au/tom/wp-content/themes/tomcampbell/assets/css/main.min.css.map” i can see the map - there is something i am missing but cannot see what…
You missed the forward slash before tom.
Awesome, thanks - all working now!
I knew it would be something simple… 
I’m having a similar problem, and think my file routes may be the source - not sure tho. Here’s what I have going on in my Grunt file:
less: {
dist: {
files: {
'assets/css/main.min.css': [
'assets/less/app.less'
]
},
options: {
compress: true,
// LESS source map
// To enable, set sourceMap to true and update sourceMapRootpath based on your install
sourceMap: true,
sourceMapFilename: 'assets/css/main.min.css.map',
sourceMapRootpath: '/wp-content/themes/roots-master/'
}
}
},
It results in no .map file being created, and main.min.css is not updated with the code at the end.
Is my problem apparent from the source code I posted, or would more information be helpful? I haven’t deployed yet.
Thanks for your help
Chrom version 31.0.1650.57 (up to date)
David
You can’t really troubleshoot the path issue until the source map is being created properly.
It’s not something I’ve seen before and I’m surprised that Grunt isn’t outputting an error. Perhaps check the GitHub pages for grunt-contrib-less and/or less.js.
This is what Grunt’s outputting:
>> File "Gruntfile.js" changed.
Running "jshint:all" (jshint) task
>> 2 files lint free.
Running "uglify:dist" (uglify) task
File "assets/js/scripts.min.js" created.
Running "version" task
Versioning assets/css/main.min.css...OK
Versioning assets/js/scripts.min.js...OK
"lib/scripts.php" updated with new CSS/JS versions.
Done, without errors.
Completed in 0.970s at Sat Nov 30 2013 11:02:06 GMT-1000 (HST) - Waiting...
Also, if it’s not a path issue as you pointed out, what could it be?
I’m a bit of a CL/Grunt/JS newb, so please excuse my naivety : )
When I was initially installing Roots and Grunt, I mistakenly installed Roots and NPM/Grunt before I properly installed Wordpress. I double backed and installed NPM again (right “over” the previous install?) I haven’t run into any complications due to this mistake - but this might be the first.
Does it sound like a possibility? What would you suggest as a course of action?
Hi @Foxaii
For some reason I’m getting the same error as other people. On my local install I can only see on the console:
http://localhost/cre-root/wp-content/themes/cre-root/assets/css/main.min.css?ver=ae1c1eea51a18ad6f51c4f7963a05acd:LINENUMBER
My Gruntfile.js config is as follows:
sourceMap: true,
sourceMapFilename: 'assets/css/main.min.css.map',
sourceMapRootpath: '/wp-content/themes/cre-root/'
and the last line on my main.min.css the is:
/*# sourceMappingURL=/wp-content/themes/cre-root/assets/css/main.min.css.map */
I don’t know what else to look into. Any suggestions?
Thanks,
Mauro
Assuming the sourcemap is being created, try /cre-root/wp-content/themes/cre-root/ as the sourceMapRootpath.
@Foxaii Thanks.
I did make the path changes before you mentioned it and it did not work because I had a “grunt watch” thread running.
On the page where @ben explains this somebody mentions this, but so that people are aware, I will also explain it here.
Please, be aware that you have to STOP your “grunt watch” thread if you have it running and retype grunt - without the watch - for the changes to take.
Thanks again @Foxaii
Hi, I seem to be having the same problem with the new version of roots. I followed these instructions: http://roots.io/using-less-source-maps/ but still don’t see the css in chrome developer tools. Before I did the tutorial I was able to see and search the css file under Elements but now I only see the map file and nothing in my sidebar. Hope that makes sense…
I can see the line at the end of main.css and see main.css.map… I also updated gruntfile.js and ran grunt.
Thanks!
After fighting with this issue for a while and checking and double checking my settings I finally figured out that autoprefixer was resetting my .css sourceMappingUrl
Changing autoprefixer:dev map options to this worked.
map: {
prev: 'assets/css/',
annotation: '<%= less.dev.options.sourceMapRootpath %><%= less.dev.options.sourceMapFilename %>'
}