LESS 是一种动态样式语言，它使用类似 CSS 的语法来生成更加美观和有组织的 CSS 代码。然而，在开发过程中，你可能会遇到 "unexpected}" 的编译错误，这个错误会导致页面无法正确显示，造成严重的问题。因此，本文将详细介绍如何解决这个问题，以确保你的 LESS 代码顺利编译。
产生 "unexpected}" 的原因
在 LESS 中，大括号（{}）用来定义样式规则或者 LESS 变量或 mixin，但是当你在 LESS 中使用嵌套的规则时，可能会出现 "unexpected}" 的错误，因为你的大括号是多余的，或者你的嵌套语法不正确。
以下是一个经常出错的示例代码，其中漏掉了一个冒号：
.parent {
color: red;
.child {
background: green;
}
}在编译上述代码时，LESS 编译器会给出类似 "unexpected}" 的错误提示。这是因为编译器到达了.css 格式的末尾，却找不到一个合适的闭合括号，所以会提示你检查大括号是否配对。
解决方法
为了解决 "unexpected}" 的错误，我们可以通过以下方式：
检查 LESS 代码
在编写 LESS 代码时，应该保持良好的编码习惯，例如正确嵌套规则，精心避免拼写错误等等。另外，在编写代码过程中，推荐使用 LESS 的代码检查工具，例如 csslint 或 stylelint，这样可以帮助你快速发现代码中的问题，避免卡德。
检查 LESS 编译选项
在编译 LESS 代码时，我们应该检查编译选项是否正确，例如是否使用了正确版本的 LESS 核心，或者是否使用最新的编译器版本。你还可以通过设置 debug 标志来检查生成的 CSS 代码，以便更容易找到错误。
以下是一个示例代码，可以用来检查 LESS 编译选项：
lessc --verbose --debug less/style.less style.css
使用 better-npm-run
更好的npm-run 是一个非常有用的工具，可以让你更好地管理 npm scripts，包括 LESS 编译等。通过设置 better-npm-run，你可以轻松地使用特定的命令来编译 LESS 代码。
以下是一个示例代码，可以用来设置 better-npm-run:
-- -------------------- ---- -------
---------- -
-------- ------ ----- -- --------------- -----------
--
---------------- -
-------- -
---------- --------
------ -
----------- ------------
--
------- -
-----
------------------
-----------
--
-------- ---------
-
-在以上示例代码中，我们将编译 LESS 代码的命令放到了 betterScripts 的 build 选项中，并且设置了 watch 选项来监控LESS 文件的变化。这样，我们只需要运行 npm run build。
即可编译 LESS 代码，而且还可以在 LESS 文件改变时重新自动编译。
结论
在本文中，我们详细介绍了如何在 LESS 中解决 "unexpected}" 的编译错误，包括通过检查代码、设置编译选项、使用 better-npm-run 等方式。这些技巧对于任何 LESS 开发者都非常重要，希望本文能够帮助你更加顺利地开发 LESS 代码，避免常见的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671b0ee39babaf620fa74dc1