Client side LESS isn't using the styles I write

Question

Here is the HTML content of the page:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script src="js/less-1.3.0.min.js" type="text/javascript"></script>
    <link rel="stylesheet/less" type="text/css" href="style.less" >    
</head>

If I open up source in Google Chrome and open in a new tab to see the less javascript file, and the less stylesheet I wrote, I can see the contents, meaning they are linked correctly.

Why aren't my LESS styles being applied?

Edit: Even running this from WAMP to avoid the whole "file:///" problem, doesn't apply the styles.

Edit:

The contents of the .less file:

html, body {
    margin:0;
    padding:0;
}

#headbg {
    height:497px;
    background-color:red;
}

#header-wrapper {
    width:980px;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
}

#header-wrapper #left-container {
    float:left;
    position:relative;
    outline:1px solid cyan;    
}

#logo {
    margin-left:10px;
    display:block;
}

#logo-hue {
    position:absolute;
    top:20px;
}

#social {
    float:left;
    color:#fff;
}

#social .message {
    text-align:center;
}

#social .contact {
    text-align:center;
}

#header-wrapper #carusel-container {
    float:left;
    outline:1px solid cyan;
}

#bodybg {
    background-color:#fff;
}

Maybe you have a bug in your style.less? Hard to guess... try it through a less compiler. — Mike Robinson, May 14 '12 at 14:16
elaborate to describe the specific issue you're having - are there any errors on the console? is the behavior not as expected? — Eliran Malka, May 14 '12 at 14:16
No errors on console whatsoever. None of the styles are applied at all. — Only Bolivian Here, May 14 '12 at 14:17
related: http://stackoverflow.com/questions/3084892/less-js-not-working-in-chrome — Sindhara, May 14 '12 at 14:20
Just glancing at the code in this question: if this is the code LESS is compiling, it *should* work. I don't see any errors. — Nathan Taylor, May 14 '12 at 14:20
@kuh-chan: Still won't work in Forefox 12. Did they copy Chrome's security feature? — Only Bolivian Here, May 14 '12 at 14:21

score 2 · Accepted Answer · answered May 14 '12 at 14:32

2

Put the stylesheet reference above any others.

<head>
    <link rel="stylesheet/less" type="text/css" href="style.less" >    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script src="js/less-1.3.0.min.js" type="text/javascript"></script>
</head>

answered May 14 '12 at 14:32

RSM

14,540
34
97
144

This has to be the dumbest bug I have ever seen. Thanks for your help! :D – Only Bolivian Here May 14 '12 at 14:34
Thats quite ok. I had this problem a while back. Always be careful with mixing jquery includes and js with css – RSM May 14 '12 at 14:35

score 0 · Answer 2 · answered May 14 '12 at 14:43

Ryan's answer is right : however with Js and Css theory says Js will start working soon as loaded depends on which function is called. but when js script is running - the css is not yet loaded. so alwasy load css first so that js ( if they working straight e.g. document.ready() ) - they have all properties, styles available which they require.

And for the same reason you should include jquery file first ( if you are using it ) before trying any of their plugins.

Hope it helps

Client side LESS isn't using the styles I write

2 Answers2