CODEWITHSUNDEEP
javascriptcssinternet-explorerwebless
Jesko Hüttenhain
Jesko Hüttenhain

Reputation: 1307

LESS not working in IE11 - Why?

I have the following example: 

<style type="text/less">
@bg: black;
@fg: white;
body {
 background-color: @bg;
 color: @fg;
}
</style>

<script type="text/javascript" language="JavaScript"
  src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.js">
</script>
<title> test </title>
</head>

<body>
test

<script type="text/javascript" language="JavaScript">
  alert("test");
</script>

</body>

</html>

It shows a JavaScript alert and white text on black ground in Firefox, Chrome and Opera. For some reason, it does not work in IE11: The alert is being shown, but the LESS parsing does not happen. I made the IE11 Developer Tools break on all exceptions, but nothing seems to go wrong.

The alert is here because I was worried that Internet Explorer might not be executing scripts at all, but this is clearly not the case.

Btw, I also tried this with the earlier version

https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.min.js

instead of the one from cdnjs.cloudflare.com, no luck either.

As far as I know, LESS should be supported on IE11. I would be very grateful if anyone had any idea why it is not working.

Edit It seems like this may be a problem with my internet explorer configuration. I am on a Windows 2008 R2 machine with all my Internet Explorer settings at default.

Upvotes: 3

Views: 2070

Answers (1)

morkro
morkro

Reputation: 4655

Place your LESS code after the <script>tag.

<script type="text/javascript" language="JavaScript"
  src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.js">
</script>
<style type="text/less">
@bg: black;
@fg: white;
body {
 background-color: @bg;
 color: @fg;
}
</style>
<title> test </title>

If you place it before you include less.js the browser doesn't know what to do with that piece of code. That is why it doesn't get parsed.

Another approach: remove language="JavaScript" on all <script> tags as the attribute has been deprecated.

Upvotes: 5

Related Questions