LESS 是一种 CSS 预处理器，它提供了许多便利的功能，如变量、函数、嵌套等，使得 CSS 的编写更加高效和灵活。然而，在使用 LESS 进行编译时，有时会出现 Unrecognised input 错误，这个错误提示通常表示 LESS 编译器无法识别某些输入。本文将介绍解决这个错误的方法，帮助开发者更好地使用 LESS。
造成错误的原因
Unrecognised input 错误通常是由以下原因造成的：
- 语法错误：LESS 编译器无法识别某些语法，如缺少括号、分号等。
- 引用错误：LESS 文件中引用了不存在的文件或路径错误。
- 版本兼容性问题：LESS 编译器版本过低或过高，无法识别某些语法。
解决方法
针对以上原因，我们可以采取以下方法来解决 Unrecognised input 错误：
1. 检查语法
首先，我们需要检查 LESS 文件的语法是否正确。常见的语法错误包括缺少括号、分号、冒号等。例如：
-- -------------------- ---- ------- -- ---- ---- - ------ --- ----------------- ----- - -- ---- ---- - ------ ---- ----------------- -----
以上代码会导致 Unrecognised input 错误，因为 LESS 编译器无法识别这些语法错误。因此，我们需要仔细检查 LESS 文件的语法，确保它们符合 LESS 的语法规范。
2. 检查引用
其次，我们需要检查 LESS 文件中引用的文件是否存在，并且路径是否正确。例如：
// 引用不存在的文件 @import "mixin.less"; // 引用路径错误 @import "../mixin.less";
以上代码会导致 Unrecognised input 错误，因为 LESS 编译器无法找到 mixin.less 文件。因此，我们需要检查 LESS 文件中引用的文件是否存在，并且路径是否正确。
3. 更新版本
最后，我们需要检查 LESS 编译器的版本是否过低或过高。如果 LESS 文件中使用了较新的语法，但是 LESS 编译器版本过低，就会出现 Unrecognised input 错误。因此，我们需要更新 LESS 编译器的版本，确保它能够识别当前使用的语法。
示例代码
以下是一个包含语法错误的 LESS 文件：
// demo.less
body {
color: red
background-color: blue;
}编译这个 LESS 文件会出现 Unrecognised input 错误。我们可以将语法错误修正后，重新编译：
// demo.less
body {
color: red;
background-color: blue;
}以上示例代码演示了如何检查语法错误，并修正错误后重新编译 LESS 文件。
总结
本文介绍了解决 LESS 编译出现 Unrecognised input 错误的方法。在使用 LESS 进行开发时，我们应该仔细检查 LESS 文件的语法、引用和版本，确保它们符合 LESS 的语法规范，并且能够被 LESS 编译器正确识别。通过这些方法，我们可以更好地使用 LESS，提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66261950c9431a720c269e4b