Question

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

我只是想做一个简单的测试。这是我的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也应为红色。但它们不会在任何浏览器上显示任何样式。请帮忙！

Answer 1

您的代码运行正常，如此屏幕截图所示：

enter image description here

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

您的文件已正确命名和定位：检查您的网络控制台中的404错误（Chrome和Firefox中的F12）。
您的文件由网络服务器提供。如果您尝试通过file:///path/less.js网址访问这些文件，则不会提供较少的文件 - Chrome会向我发出“交叉来源请求”错误。

Answer 2

在Chrome中停用缓存，就我而言。

Answer 3

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

下载，安装并打开Winless;
打开LESS文件 compliler并记住，每次保存LESS文件时， Winless会将其编译成CSS文件;
包含导致标题的CSS文件。

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

祝你好运！

Answer 4

Windows Server添加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>

Answer 5

如果你正在使用chrome，请看一下：

less.js not working in chrome

简而言之：

如果你正在使用Chrome和，那么Less.js浏览器脚本目前无效由于已知的Chrome，您网页的路径以“file：///”开头问题。

Answer 6

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

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

较少的CSS无法在本地工作

6 个答案: