Cant get source maps working

1

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?

1 Like
2

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?

3

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

4

Your source map url is wrong. Check the last line of main.min.css.

5

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 :smile:

6

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.

7

Oh, i didnt realise that RE the rewrites - thanks

Will try your other suggestions this evening.

8

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ā€¦

9

You missed the forward slash before tom.

2 Likes
10

Awesome, thanks - all working now!

I knew it would be something simpleā€¦ :slight_smile:

11

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

12

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.

13

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 : )

15

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?

16

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

17

Assuming the sourcemap is being created, try /cre-root/wp-content/themes/cre-root/ as the sourceMapRootpath.

18

@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

3 Likes
19

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!

1 Like
20

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 %>'
      }