LESS only works on my local MAMP server

Question

So I am trying to use LESS on a site I'm making for a friend. When I create a .less stylesheet and link it into my html and try to see it locally on my browser it doesn't show any of the styles I created. But when I upload the site to my local MAMP server and view it it works. It's not a huge deal, I can always just edit it on my local server, I just want to know why it's not working when browsing the test.html file on my desktop. Code is...

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet/less" href="styles.less" type="text/css"/>
<script type="text/javascript" src="less-1.5.0.min.js"></script>
</head>

<body>
<div>
    <header>
        <h1>First LESS Examples</h1>
    </header>

    <div>
        <p>This is some content in the web page.</p>
    </div>
</div>

</body>
</html>

style.less

@baseColor: #535353;

header {
font-family: Arial, Helvetica, sans-serif;
background-color: lighten(@baseColor, 50%);
border: 1px solid darken(@baseColor, 10%);
color: @baseColor;
}

Most of browsers do not run local file scripts for security reasons. See [1](http://stackoverflow.com/a/18531239/2712740), [2](http://stackoverflow.com/questions/3084892/less-js-not-working-in-chrome) etc. — seven-phases-max, Dec 21 '13 at 05:54

score 0 · Answer 1 · answered Dec 21 '13 at 17:17

I actually figured it out. If anyone was wondering here's how...

I use MAMP Pro and moved my root folder to my local host and set up a server on the MAMP interface.

Then using the root folder location and URL I created a new site on Dreamweaver - making it a testing server.

I then used CodeKit to compile the .less files as I was creating them in Dreamweaver and saving them to my root folder.

I then linked the CSS file being generated my CodeKit to the index.html page and now I am able to see the updated website with the CSS on Dreamweaver's live view as well as on the Chrome browser that is automatically refreshed when the root folder is updated on my local server - thanks to CodeKit.

LESS only works on my local MAMP server

1 Answers1