Document Level Less

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.

标签： html css less

1条回答

劳资没心，怎么记你

2楼-- · 2019-08-01 13:18

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

0人赞添加讨论(0) 举报

Document Level Less

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间