LESS 是一门优秀的 CSS 预处理语言，它具有许多优秀的特性，如变量、函数等。与 CSS 不同，LESS 的源码需要经过预处理才能转换为 CSS。但是，有时我们会遇到 LESS 源文件被压缩导致标记报错的问题。这篇文章将介绍这个问题以及解决方法。
问题描述
在编写 LESS 源文件时，我们通常会使用多行代码，这样可以更好地组织代码结构。但是，当我们将 LESS 源文件压缩成单行字符串时，如果 LESS 源文件中含有注释、空行等无用的字符，就会导致压缩后的源文件出现一些奇怪的报错。
例如，当我们使用 lessc 命令将 LESS 源文件压缩成 CSS 文件时，如果我们的 LESS 文件中含有注释或空行，那么就会出现以下报错：
ParseError: Unrecognised input in file.less on line 20, column 1: 19 /** This is a comment */ 20 ^
这个报错提示说 LESS 编译器在第 20 行的第 1 列（也就是文件开头）出现了无法识别的输入。实际上，这个错误是由于源文件被压缩成单行字符串时，注释和空行被忽略导致的。
解决方法
为了解决这个问题，我们可以采用以下两种方法：
方法一：修改 LESS 编译选项
LESS 编译器提供了 compress 选项，用于压缩输出的 CSS 文件。默认情况下，该选项设置为 false，表示不压缩输出文件。我们可以修改这个选项，将其设置为 true，这样 LESS 编译器就会在输出 CSS 文件时压缩文件，并且将注释和空行删除。
lessc --compress file.less file.css
如果你使用的是 Grunt、Gulp 等构建工具，则可以在配置文件中设置 compress 选项：
-- -------------------- ---- ------- ------------------ ----- - -------- - --------- ---- -- ------ - ------------ -------------- - - ---展开代码
方法二：避免在 LESS 源文件中出现无用字符
当我们遇到这个问题时，最简单的方法是避免在 LESS 源文件中出现注释、空行等无用字符，尽量简化代码结构。这样，即使 LESS 文件被压缩，也可以避免出现标记报错。
为了更好地展示这个问题，我们可以来看一个例子。
示例代码
假设我们有以下 LESS 文件：
-- -------------------- ---- ------- -- ---- -- - ------- -- ------- ---- ---- - ------ ------- - -- ---- -- ------- ------- --展开代码
当我们使用 lessc 命令将该文件压缩成 CSS 文件时，就会出现以下报错：
ParseError: Unrecognised input in file.less on line 5, column 1: 4 @color: red; 5 ^
这个报错提示说 LESS 编译器在第 5 行的第 1 列（也就是文件开头）出现了无法识别的输入。实际上，这个错误是由于源文件被压缩成单行字符串时，注释被忽略导致的。
为了解决这个问题，我们可以使用以下 LESS 文件替代上面的文件：
@color: red; body { color: @color; }
这个文件没有注释和空行，即使被压缩成单行字符串也不会出现标记报错。
总结
LESS 源文件被压缩导致标记报错是一个常见的问题，但是它并不难解决。我们可以通过修改 LESS 编译选项、避免在 LESS 源文件中出现无用字符等方式来解决这个问题。当然，为了保证代码的可读性和可维护性，在编写 LESS 代码时应该避免使用过多的注释和空行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649bd24448841e9894893b65
