LESS CSS minimal setup failure

2019-04-03 17:01发布

问题:

Looking at the quick start on the official site I wrote:

less.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet/less" type="text/css" href="style.less" />
    <script src="less-1.1.3.min.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>foo</h1>
  </body>
</html>

style.less

@color: red;

h1 {
  color: @color;
}

both locally, and all I get is (from Google Chrome console):

XMLHttpRequest cannot load file:///home/cyrus/test/style.less. Cross origin requests are only supported for HTTP.
Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101
    r
    o
    n
    d.refresh
    (anonymous function)
    (anonymous function)

WORKAROUND:

This answer shows a way to overcome this:

$ google-chrome -allow-file-access-from-files

回答1:

The less.js script currently doesn't work if you’re using Chrome and the path to your page starts with “file:///”.

There is also a SO question with the same info here: less.js not working in chrome



回答2:

Another way is use script from CDN. For example: http://cdnjs.com/

For me this solve that problem.



回答3:

The best way to load this locally is to run the local site in xampp or wamp, which gets around all of that. You will no longer get these errors when doing this. This would be the best route for this issue.