css 在客户端编译LESS?

insrf1ej  于 2023-02-01  发布在  其他
关注(0)|答案(4)|浏览(123)

我是LESS的新手。我正在尝试在客户端编译更少的代码。我发现一篇文章说要使用下面的脚本。

<script src="http://lesscss.googlecode.com/files/less-1.0.30.min.js">
    </script>

但是当我把它包含在html中(在.less文件之后),并在Chrome中打开我的本地文件时,开发者控制台显示:404(未找到)

cgh8pdjw

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.安装节点

  1. npm install http-server -g
    然后使用控制台转到您的文件夹
  2. http-server
    现在你可以使用http://localhost:8080作为你自己的服务器并且. less也可以
ldioqlga

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链接。
我仍然强烈建议您在本地机器上编译,因为这样可以节省大量宝贵的时间,因为您的页面没有任何样式。本文总结了其他方法来实现更健壮的构建过程。

js4nwp54

js4nwp543#

请参阅文档了解用法。下载less.js文件并使用<script src="less.js" type="text/javascript"></script>引用它。

tyky79it

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

相关问题