Source Maps in MODX

Debug Sass Source Files with MODX 2.3

Source Maps are now available to use with the Sass workflow for contributing to MODX Revolution 2.3. What the heck are these crazy things?

Source Maps are a generic mapping format written in JSON that can be utilized by any processed file to create relations between pre-processed files and post-processed files, for instance between pre-compressed JavaScript and the expanded development files or, as in our case, between compiled CSS and the development Sass files.
 — snugug.com

Ummm what? Don’t worry, Source Maps are magic little things you don’t even need to think about in order for them to start helping you debug your Sass stylesheets easier. If you have used Sass before, you may have noticed that when you inspect the CSS styles of your webpage you see where the come from in the arbitrary CSS file Sass is creating. Not very helpful.

Source maps are a way to end the madness and show you exactly where your styles are coming from.

Using in 2.3

Developers contributing to MODX 2.3 have a new toolkit to use. Assuming you are already setup with the 2.3 Contribution Guides, simply make sure you are up to date with Sass 3.3 and the latest node modules and you’ll be able to see the line numbers your styles come from in the original Sass files in your Developer tools.

$ cd revolution/_build/templates/default
$ sudo gem update #make sure we have sass 3.3
$ npm update
$ grunt sass:map #compile sass with sourcemaps

Comments (0)

Add a Comment

Allowed tags: <b><i><br>Comment:

** Time spent on this website is non-refundable **