Document Level Less

2019-08-01 12:52发布

问题:

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.

回答1:

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:



标签: html css less