Screen Shot 2014-03-17 at 16.14.41

LESS Preprocessor, GruntJS and Source Maps

The CSS preprocessors has evolved a lot over the past few years. One of the major “problems” that people and I have regarding preprocessors is the inability to see where your CSS rules come from when inspecting elements with developer tools, and specially when you have a lot of LESS files.

First of all, you’ll need to make sure that the task runner grunt and the grunt-contrib-less dependency are running and less is the version that supports Source Maps. Next activate your ‘Sources’, ‘Enable CSS source maps’ on your browser.

Screen Shot 2014-03-17 at 16.16.58

Now the: package.json

Screen Shot 2014-03-17 at 16.14.41

A fully working ‘Gruntfile.js’ and ‘Source Maps’:

Gruntfile.js github

Screen Shot 2014-03-17 at 16.13.05

Posible mistakes

map is not generated

check http://localhost:8888/rcv/css/ or where you setup up the map file

Destination not written because no source files were found

double check the:

Screen Shot 2014-03-17 at 16.12.32

map is generated but still showing the .CSS

Activate the ‘Sources’, ‘Enable CSS source maps’ on your browser.

Validate if you are using the latest sourceMap; we needs grunt-contrib-less > 0.9.0

check the source code on

github source code

Final result

Screen Shot 2014-03-17 at 18.11.55

Screen Shot 2014-03-17 at 16.12.12

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *