LESS：无法识别的输入答案

【问题标题】：LESS: Unrecognised inputLESS：无法识别的输入
【发布时间】：2013-08-12 05:35:30
【问题描述】：

在 Web Essentials 2012 的帮助下，我正在努力减少学习。

从一开始，这个 LESS 代码：

@main-color: red;

.mega-warning {
    font-size: 24px;
    color: @main-color;
}

给出编译错误“LESS: Unrecognized input”并且编译停止。当我在 .mega-warning 类范围内声明变量 @main-color 时，一切正常：

.mega-warning {
    @main-color: red;
    font-size: 24px;
    color: @main-color;
}

我错过了什么？

【问题讨论】：

【解决方案1】：

我正在努力解决同样的问题。出于某种原因，看起来 Web Essentials 2012 v2.9 对以变量声明开头的 *.less 文件不太满意。这是我的解决方法：

html{}

@main-color: red;

.mega-warning {
    font-size: 24px;
    color: @main-color;
}

奇怪的是，当使用独立的 lessc 1.4.2 编译器（根据 changelog 包含在 WE2012 2.9 中）时，一切都可以正常工作。我已经向 Web Essentials 扩展的作者发送了一封电子邮件，并向他发布了这个问题的链接，所以希望他很快就会解决这个问题。

【讨论】：

【解决方案2】：

使用编码“UTF-8 without BOM”保存更少的文件。这个方法是在帖子中提出的 VS 2012 Web Essentials Less Compile Error

【讨论】：

【解决方案3】：

我在 VS / Web Essentials 2013 中遇到了这个问题。我的解决方法是使用模板重新创建 .less 文件。我最初只是将扩展名从.css 更改为.less，但显然这不起作用。因此，请改用 .less 文件的 Visual Studio 模板。

我不确定 .less 模板来自何处，它可能随 Web Essentials 提供，或者它可能来自 SideWaffle 模板包。

【讨论】：

【解决方案4】：

试试这个你在哪里添加了对less文件的引用：

rel="stylesheet/less"

有了这个你的参考将看起来像

<link rel="stylesheet/less" type="text/css" href="styles.less" />

下载less.js 并在<head> 中添加引用它的<script> 标签。 css <link> 应该在 <script> 之前。

【讨论】：