css - LESS CSS 不能在本地工作

Question

我真的很想学习 LESS，但根本没有运气让它发挥作用。我想让它在本地工作。请帮忙。

我只想做一个简单的测试。这是我的LESS代码：

@color: red;

.header {
    color: @color;
}

h2 {
    color: @color;
}

这是我的 HTML 代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>LESS TEST</title>
    <link rel="stylesheet/less" type="text/css" href="style.less">
    <script src="less.js" type="text/javascript"></script>
</head>

<body>
    <div class="header"> <h2>This is a test</h2> </div>
</body>
</html>

所以标题类应该是红色的，H2 也应该是红色的。但它们不会在任何浏览器上显示任何样式。请帮忙！

score 4 · Accepted Answer

您的代码运行良好，如下图所示：

在此处输入图像描述

请注意，在运行它之前，我在本地下载了一个缩小版的less.js。我建议你验证：

确保您的文件已正确命名和定位：在您的 Web 控制台中检查 404 错误（Chrome 和 Firefox 中的 F12）。
您的文件正在由网络服务器提供服务。如果您尝试通过 URL 访问它们，则不会提供较少的文件file:///path/less.js——Chrome 给我一个“跨源请求”错误。

score 2 · Accepted Answer

2

在 Chrome 中禁用缓存，在我的情况下有效。

于 2017-01-16T03:10:42.577 回答

score 1 · Accepted Answer

我使用WINLESS。它是免费的，易于使用并且在缩小代码方面非常强大。

下载、安装并打开Winless；
用编译器打开LESS文件，记住每次保存LESS文件，Winless都会把它编译成CSS文件；
将生成的 CSS 文件包含在您的标题中。

您不必模拟 Apache 服务器即可使用它。

祝你好运！

score 0 · Accepted Answer

Windows Sever Add Mime Type Less 或 web.config 文件添加行

        <staticContent>
        <mimeMap fileExtension=".less" mimeType="text/css" />
    </staticContent>

       <link type="text/css" rel="stylesheet" href="reset.css" media="all" />
    <link href="http://www.petshop.net.tr/less-ornek/stil.less" type="text/css" rel="stylesheet/less" media="all" />
    <script type="text/javascript" src="less-1.3.0.min.js"></script>

score 0 · Accepted Answer

您必须使用服务器来运行代码。在 MAC 上运行代码的一种简单方法是使用 python 服务器

执行以下操作，在终端中找到包含代码的文件夹，然后输入python -m SimpleHTTPServer 8000。在浏览器中转到 localhost:8000

score 0 · Accepted Answer

如果您使用的是 chrome，请查看以下内容：

less.js 在 chrome 中不起作用

简而言之：

如果您使用的是 Chrome，并且由于已知的 Chrome 问题，您的页面路径以“file:///”开头，则 Less.js 浏览器脚本当前将无法运行。

css - LESS CSS 不能在本地工作

6 回答 6

Related

Reference