Using less.js in a Passenger nginx environment

Posted by Tejus Parikh on October 12, 2012

To achieve a cleaner separation between environments, I've taken to going beyond RVM and spinning up Ubuntu Linux VM's for each of the projects. That way, my databases, NoSQL stores, gems, and search indexes are completely separate and changes in one have no impact on the others.

While much cleaner, this approach can expose interesting quirks in the software building blocks. One of my projects makes use of Twitter Bootstrap, which is built around Less CSS. Running locally, I make use of less.js instead of relying on watchers to recompile the stylesheet.

However, when running Phusion Passenger in a VM, less thinks that it's in a production environment. Therefore, it does not update the stylesheets very often making UI development a pain.

However, there is a pretty easy fix for this problem. You need to add a few lines of javascript around your less includes to force less to operating in development mode.

    <!-- The following lines force less into development mode -->
    <script type="text/javascript">
        var less = { env: 'development'};
    </script>

    <link rel="stylesheet/less" type="text/css" href="/less/bootstrap.less">
    <link rel="stylesheet/less" type="text/css" href="/less/responsive.less">

    <!-- Make sure less is watching for changes -->
    <script type="text/javascript">
        less.watch()
    </script>
    

Related Posts:

Tejus Parikh

Tejus is an software developer, now working at large companies. Find out when I write new posts on twitter, via RSS or subscribe to the newsletter: