我是LESS的新手。我正在尝试在客户端编译更少的代码。我发现一篇文章说要使用下面的脚本。
<script src="http://lesscss.googlecode.com/files/less-1.0.30.min.js"> </script>
但是当我把它包含在html中(在.less文件之后),并在Chrome中打开我的本地文件时,开发者控制台显示:404(未找到)
cgh8pdjw1#
你可以从https://github.com/less/less.js/archive/v2.5.1.zip下载最新版本或https://raw.githubusercontent.com/less/less.js/master/dist/less.min.js缩小:https://raw.githubusercontent.com/less/less.js/master/dist/less.min.js
你必须使用你自己的本地服务器因为一些浏览器将阻止. less服务从file://协议
file://
1.安装节点
npm install http-server -g
http-server
http://localhost:8080
ldioqlga2#
你想在本地机器上编译,然后把编译好的文件推到服务器上,然后你想确保你的CSS文件引用了那个编译好的文件。LESS文档推荐在您的计算机上编译此java脚本:http://lesscss.org/#download-options-browser-downloads或者,您可以在客户端方法上进行编译,但您应该更新脚本以使用<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>,即来自他们站点的CDN链接。我仍然强烈建议您在本地机器上编译,因为这样可以节省大量宝贵的时间,因为您的页面没有任何样式。本文总结了其他方法来实现更健壮的构建过程。
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
js4nwp543#
请参阅文档了解用法。下载less.js文件并使用<script src="less.js" type="text/javascript"></script>引用它。
less.js
<script src="less.js" type="text/javascript"></script>
tyky79it4#
我使用link标记创建了前面提到的示例,但是我还使用了style标记,这使得开发中的测试更加容易。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSS --> <!-- example with link tag --> <link href="css/app.less" rel="stylesheet/less"> <!-- example with style tag --> <style type="text/less"> html { body { background-color: red; } } </style> <!-- JS --> <!-- The library automatically converts <link> tags --> <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/4.1.3/less.min.js"></script> <!-- Convert style tags --> <script> const lessStyles = document.querySelectorAll('style[type="text/less"]') lessStyles.forEach(styleElement => { const lessCode = styleElement.innerText less.render(lessCode, (error, output) => { const cssCode = output.css styleElement.innerText = cssCode styleElement.setAttribute('type', 'text/css') }) }) </script> </head> <body></body> </html>
x一个一个一个一个x一个一个二个x
4条答案
按热度按时间cgh8pdjw1#
你可以从https://github.com/less/less.js/archive/v2.5.1.zip下载最新版本
或
https://raw.githubusercontent.com/less/less.js/master/dist/less.min.js
缩小:https://raw.githubusercontent.com/less/less.js/master/dist/less.min.js
更新
你必须使用你自己的本地服务器因为一些浏览器将阻止. less服务从
file://
协议使用自己的服务器
1.安装节点
npm install http-server -g
然后使用控制台转到您的文件夹
http-server
现在你可以使用
http://localhost:8080
作为你自己的服务器并且. less也可以ldioqlga2#
你想在本地机器上编译,然后把编译好的文件推到服务器上,然后你想确保你的CSS文件引用了那个编译好的文件。
LESS文档推荐在您的计算机上编译此java脚本:http://lesscss.org/#download-options-browser-downloads
或者,您可以在客户端方法上进行编译,但您应该更新脚本以使用
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
,即来自他们站点的CDN链接。我仍然强烈建议您在本地机器上编译,因为这样可以节省大量宝贵的时间,因为您的页面没有任何样式。本文总结了其他方法来实现更健壮的构建过程。
js4nwp543#
请参阅文档了解用法。下载
less.js
文件并使用<script src="less.js" type="text/javascript"></script>
引用它。tyky79it4#
我使用link标记创建了前面提到的示例,但是我还使用了style标记,这使得开发中的测试更加容易。
x一个一个一个一个x一个一个二个x