Search code examples
twitter-bootstraplessubuntu-serverubuntu-12.04

LessCss client-side issue on Ubuntu Server 12.04 with Twitter Bootstrap


In advance, I apologize if the question title may not be be convenient. I'm pretty sure that Ubuntu Server 12.04 is not the cause, but I can explain where is the trick...

My website uses Bootstrap with LESS and its client-side compilation (I'm on development cycle so I want to keep it on client). Everything works fine on my local instance (a laptop with Ubuntu 12.04) but style is not generated when requesting the same website from my server instance (running on Ubuntu Server 12.04).

Both runs Apache 2.2.22 with the same mods : alias, auth_basic, authn_file, authz_default, authz_groupfile, authz_host, authz_user, autoindex, cgi, deflate, dir, env, headers, mime, negotiation, php5, reqtimeout, rewrite, setenvif, ssl, status.


What I get from my local instance (Ubuntu 12.04) Works fine !

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>My website</title>
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <meta content="" name="description">
        <meta content="alterphp" name="author">
        <link href="/bundles/mywebsite/css/main.less" type="text/css" rel="stylesheet/less">
        <link href="/bootstrap/less/responsive-768px-979px.less" type="text/css" rel="stylesheet/less">
        <script type="text/javascript" src="/jquery/jquery.js"> ... </script>
        <script type="text/javascript" src="/jquery.form.js"> ... </script>
        <script type="text/javascript" src="/bundles/mywebsite/js/less-1.3.0.min.js"> ... </script>
        <style id="less:bundles-mywebsite-css-main" type="text/css" media="screen"> **Style is well processed** </style>
        <style id="less:error-message" type="text/css" media="screen"> ... </script>
    </head>
    <body>
        ...
    </body>
</html>

With FireBug, I can see that only two main less files appear as downloaded in the Network tab. main.less imports many less files that are all processed in the main.less response.


What I get from my server instance (Ubuntu Server 12.04) Doesn't work !

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>My website</title>
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <meta content="" name="description">
        <meta content="alterphp" name="author">
        <link href="/bundles/mywebsite/css/main.less" type="text/css" rel="stylesheet/less">
        <link href="/bootstrap/less/responsive-768px-979px.less" type="text/css" rel="stylesheet/less">
        <script type="text/javascript" src="/jquery/jquery.js"> ... </script>
        <script type="text/javascript" src="/jquery.form.js"> ... </script>
        <script type="text/javascript" src="/bundles/mywebsite/js/less-1.3.0.min.js"> ... </script>
        <style id="less:error-message" type="text/css" media="screen"> ... </script>
    </head>
    <body>
        ...
    </body>
</html>

No style is processed from main.less ... With FireBug, I can see that all less files imported from main.less appear as downloaded in the Network tab.

Edit 1 : I reach my pages, and every resources one-by-one (each LESS files is reachable and complete). I have no error in the Network tab, it's just that LESS style is not processed on my server instance...


I take any suggestion about this enigma !


Solution

  • Forcing less.env to development helped me as i discovered the debug mode of LESS... Even my local instance has a hostname so less.env was always 'production' and i never saw any error from LESS.

    My mistake was that I was importing less files with too much subdirectories or relative path. Sorry for this vague explanation but this what I got from this issue on github : https://github.com/cloudhead/less.js/issues/723