LESS 编译出现 “TypeError: sourceMapGenerator.addMapping is not a function” 错误的解决方法

LESS 编译出现 “TypeError: sourceMapGenerator.addMapping is not a function” 错误的解决方法

LESS 是一种 CSS 预处理语言，在前端开发中广泛使用。由于它的语法比较简单，并且具有嵌套、变量、函数等功能，可以大大提高开发效率。不过，在使用 LESS 编译的过程中，有时会遇到 “TypeError: sourceMapGenerator.addMapping is not a function” 错误。这篇文章将介绍这个错误的原因，以及解决方法。

错误原因分析：

LESS 编译出现 “TypeError: sourceMapGenerator.addMapping is not a function” 的错误，通常是由于在编译的过程中使用了一个错误的参数引发的。具体来说，当我们在编译 LESS 文件时，指定了一个无效的参数（如：false，null等）作为 sourceMap 的参数时，就会出现这个错误。

解决方法：

在解决这个错误之前，我们需要先了解一下 sourceMap 参数的作用。sourceMap 是一个开关，用于开启或关闭源映射功能。源映射是将编译后的 CSS 代码映射回原始 LESS 代码的技术，可以帮助我们更方便地调试 LESS 代码。因此，在一般情况下，我们都应该开启源映射功能。

解决方法非常简单，只需要修改我们编译 LESS 文件时的 code：

原始的编译代码是这样的：

lessc --source-map=filename.map input.less output.css

只需要将 --source-map 参数修改为 --source-map=filename 表示开启源映射功能，且源映射文件将被保存到 filename.map 文件中。最终的编译代码应该是这样的：

lessc --source-map=filename input.less output.css

这样就可以避免 “TypeError: sourceMapGenerator.addMapping is not a function” 错误的出现。

示例代码：

LESS 文件代码：

@color: #f00;

p {
    color: @color;
}

编译之后的 CSS 代码：

p {
  color: #f00;
}

使用命令行进行编译：

lessc --source-map=example filename.less filename.css

输出的结果：

$ lessc --source-map=example example.less example.css

# 建立 example.css
# 建立 example.css.map

总结：

在使用 LESS 进行编译的过程中，遇到 “TypeError: sourceMapGenerator.addMapping is not a function” 错误时，应该检查我们编译 LESS 文件时使用的参数是否正确。在开启源映射功能时，应该将 --source-map 参数修改为 --source-map=filename，表示将源映射文件保存到 filename.map 文件中。这样就可以避免这个错误的出现。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f6cac3f6b2d6eab3f5427e