Use your LESS files in Browserify with this Node module

Update: Since May 2017, node-lessify is now being actively maintained by GitHub user @dxcanas, who generously took over the project after I moved from browserify to webpack. I'm maintaining this post for archival reasons but encourage you to start with the current documentation on NPM.

At TIME, where I have been since August, we place interactives in pages using a WordPress short code that places an empty <div> on the page and appends a single Javascript file to the end of the document. That file is responsible for assembling the entire application inside that <div>: the markup, style and code.

I like this strategy because it keeps each project self contained outside the CMS while still running directly in the article page instead of in dreaded iframes. I use browserify to write everything in Node, using require() to pull in scripts as needed and bundle them into one file. It's an enormously satisfying way to compose.

But it can get annoying to assemble all the HTML and CSS from Javascript. Out of the box, browserify only allows you to require() Javascript and JSON files. Fortunately, it allows you to pass scripts in the command line that extend this capability to other times of files, so long as they end up as Javascript at the end of the transformation.

For HTML, there's already a useful module called node-underscorify, which allows one to include Underscore templates. Which that module as a model, I just published a node-lessify package that allows one to require LESS or CSS (which is, of course, merely a subset of LESS).

To install:

npm install node-lessify

To run:

browserify -t node-lessify script.js > bundle.js

Fixes and questions welcome at the repo, as always.