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>
    

Tejus Parikh

I'm a software engineer that writes occasionally about building software, software culture, and tech adjacent hobbies. If you want to get in touch, send me an email at [my_first_name]@tejusparikh.com.