LESS file not working on Client Side

Question

I just downloaded the Amelia theme from bootswatch.com and named it AmeliaBootswatch.less. Also, I downloaded the variables file and named it AmeliaVariables.less.

In the AmeliaBootstrap.less, I have the following tag:

@import "AmeliaVariables.less";

Now, in my aspx page, I have the following code:

<link rel="stylesheet/less" 
          type="text/css" 
          href="Content/LESS/AmeliaBootstrap.less" />
<script src="Scripts/LESS-1.5.0.min.js"
        type="text/javascript">
</script>
<script type="text/javascript">
        less.watch();
</script>

The less.watch() repeatedly gets the AmeliaBootstrap.less and AmeliaVariables.less files without throwing any errors.

Can somebody please help me with this?

Answer 1

By default LESS starts in "production" mode (unless the page is running from "localhost") so it does not notify if any error occurs during compilation. You may need to set "development" mode to see possible errors, e.g.:

<script type="text/javascript">
    less.env = "development";
</script>

LESS options should be specified before the less script itself.