Document Level Less

Question

I am working on a project for school and wanted to use the less library. I tried something like
<link rel="stylesheet/less" type="text/css" href="style.less"> but this didn't work, I got the error XMLHttpRequest cannot load file:/// [..] /style.less. Cross origin requests are only supported for HTTP. Meaning I basically need to run a server for this implementation. However, since this is supposed to be a stand-alone project for a non-technical class, running a server is out of the question. So, my question is:

How do I use less at document level, the same way one would write the css equivalent
<style>div{color:#F00}</style>?

Searching the google for "document level less" returned no related results.

If you don't get better answer: I suggest a litte dig into the less API (don't fear, it is surprising simple), and call somehow its main less-interpreting method directly with the content (innerHTML) of the style-tag. — peterh, Dec 04 '13 at 20:09

score 5 · Accepted Answer · edited May 23 '17 at 12:03

You can't use LESS at document level. Less is a pre compiler for CSS, so you should use the end product in your site (css). You don't need a webserver to show html + css local in a webbrowser. You can compile your LESS to CSS client side (by including less.js) or server side, the source code bundles a compiler. Also read: Is there a way to bypass Javascript / jQuery's same origin policy for local access?

for example the file like below works also when i load it from my local files in a webbrowser:

<html>
<head>
    <link rel="stylesheet" media="(max-width: 767px)" href="green.less" />
    <link rel="stylesheet" media="(min-width: 768px)" href="red.less" />
    <script type="text/javascript">less = { env: 'development' };</script>
    <script src="less.js" type="text/javascript"></script>
</head> 
<body>
<p>color this text</p>
</body>
</html>

update When you are sure javascript works and less.js loads and you don't see your styles still, their probably will be an error or typo in your LESS files. If there is an error, your LESS file won't compile, so their will be any CSS and you won't see any styling. By default less.js don't show errors in the browser. Add <script type="text/javascript">less = { env: 'development' };</script> to your source to allow LESS errors shown in your browser (from: https://stackoverflow.com/a/11289000/1596547).

Example:

enter image description here

I replaced `rel="stylesheet/less" type="text/css"` with `rel="stylesheet"` and it didn;t work, as less didn't parse the file, it simple loaded the stylesheet as a regular stylesheet. — Brian Hannay, Dec 05 '13 at 22:53
Does javascript work in your test environment? test alert / console.log() etc. Do you use a javascript debugger? (browser tool like firebug?) does this give any errors? Are your sure less.js load? — Bass Jobsen, Dec 05 '13 at 23:02

Document Level Less

1 Answers1

Linked