Question

我正在尝试在Web Essentials 2012的帮助下学习更少。

从一开始，就是这个LESS代码：

@main-color: red;

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

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

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

我缺少什么？

Answer 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扩展的作者发送了一封电子邮件，并向他发送了一个关于这个问题的链接，所以希望他很快就能解决这个问题。

Answer 2

使用编码＆＃34; UTF-8而不使用BOM＆＃34; 保存较少的文件。这种方法在帖子中提出 VS 2012 Web Essentials Less Compile Error

Answer 3

试试这个你添加了对less file的引用：

rel="stylesheet/less"

这样你的参考就像

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

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

Answer 4

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

虽然.less模板来自哪里，但我不是肯定的，它可能来自Web Essentials，或者它可能来自SideWaffle模板包。