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

StackOverflow https://stackoverflow.com/questions/10969551

Question

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 !

Was it helpful?

Solution 2

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

OTHER TIPS

For me the problem come from less.js

https://github.com/cloudhead/less.js/blob/master/dist/less-1.3.0.js

Look at line 3107 to 3112

less.env = less.env || (location.hostname == '127.0.0.1' ||
                    location.hostname == '0.0.0.0' ||
                    location.hostname == 'localhost' ||
                    location.port.length > 0 ||
                    isFileProtocol ? 'development'
                                                     : 'production');

You can try to force the value of less.env by adding after line 3112.

less.env ='production';

or

less.env ='development';

If for example: if you have a dns record for your dev server like "ubuntuserver" and you access to the webserver using the url "http://ubuntuserver"

Then less.env='production'; and because the ressources are local, something goes wrong.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top