0

I'm trying to compile a set of .less files, and generate individual source maps in the process. I have about 20 source files currently, and so I'm using dynamic expansion to load them all in.

I would then like the file compiled to css (works), and an individual source map generated for each (doesn't work)

file_x.less -+--> file_x.css          (YAY)
             |
             |--> file_x.css.map      (NAY)

It seems that getting source mapping to work is tricky to start with, but appears not to work at all for multiple, individual files.

So, does anyone know of an easy, snap-in alternative? If not, my next solution is to try shell out and call lessc natively, but I'd rather not if I can avoid that.

Edit: This will be used for both development and production

His Royal Redness
  • 721
  • 1
  • 9
  • 17

1 Answers1

1

I don't know of any packages that currently do this. With grunt-contrib-less, though the way I ended up solving this issue for myself was by inlining the sourcemaps in the CSS by setting outputSourceFiles: true

In my experience this is actually the most convenient way to handle your maps anyway. The only downside is that it will require that you have a minifier set up, since inlining the maps will likely more than double the size of your CSS files.

am80l
  • 1,511
  • 12
  • 11
  • The problem with this approach (for me) is that our web app is run on embedded devices, and thus the maps are of no use, so I don't want them included. They're only of use for development and/or debugging when run on a PC – His Royal Redness Sep 05 '14 at 04:44
  • I'm not suggesting shipping the maps in your app, the maps are stored within comments so all you need is a minifier set up to strip the maps in production environments, but preserve them for preprod/local environments. Thats how I solved it anyway and its worked well for me. – am80l Sep 05 '14 at 06:43