在前端开发中，我们经常会使用 LESS 来编写样式。然而，在编译 LESS 文件时，有时会遇到一个错误：“超出某些 Browserslist Config 的范围”。这个错误通常是由于我们在 LESS 文件中使用了一些不被支持的 CSS 属性或选择器，而这些属性或选择器又不在我们的 Browserslist 配置范围内所引起的。那么，该如何解决这个问题呢？
了解 Browserslist
Browserslist 是一个用于配置目标浏览器和平台的工具，它可以被用于许多前端工具中，如 Autoprefixer、babel-preset-env 等。在 LESS 编译中，我们也可以通过 Browserslist 来配置编译目标浏览器和平台。
Browserslist 的配置格式如下：
[<environment>] [<version>] [<options>]
其中，environment 表示目标平台，如 chrome、firefox、ie 等；version 表示目标浏览器的版本号，如 last 2 versions、> 1% 等；options 表示其他选项，如 not、ios_saf 等。
解决 LESS 编译错误
当我们在 LESS 文件中使用了不被支持的 CSS 属性或选择器时，编译时就会出现“超出某些 Browserslist Config 的范围”的错误。为了解决这个问题，我们可以通过以下两种方式来配置 Browserslist：
1. 添加不支持的属性或选择器到 Browserslist 配置中
首先，我们需要找到不被支持的属性或选择器所对应的浏览器版本。可以通过 Can I use 网站来查询。
然后，我们可以将不支持的属性或选择器所对应的浏览器版本添加到 Browserslist 配置中。例如，如果我们在 LESS 文件中使用了 text-size-adjust 属性，而这个属性在 Safari 中的版本低于 9.3 是不被支持的，那么我们可以将 safari < 9.3 添加到 Browserslist 配置中：
"browserslist": [ "last 2 versions", "not ie <= 8", "safari < 9.3" ]
这样，当我们编译 LESS 文件时，就不会再出现“超出某些 Browserslist Config 的范围”的错误了。
2. 禁用 Browserslist 检查
如果我们不想修改 Browserslist 配置，也可以通过禁用 Browserslist 检查来解决这个问题。我们可以在编译 LESS 文件时，添加 --no-autoprefix 参数来禁用 Browserslist 检查：
lessc --no-autoprefix input.less output.css
这样，编译时就不会再出现“超出某些 Browserslist Config 的范围”的错误了。但是，需要注意的是，禁用 Browserslist 检查可能会导致生成的 CSS 样式不兼容某些浏览器。
总结
在前端开发中，使用 LESS 编写样式是很常见的，但有时会出现“超出某些 Browserslist Config 的范围”的错误。为了解决这个问题，我们可以通过添加不支持的属性或选择器到 Browserslist 配置中或禁用 Browserslist 检查来实现。但是，需要注意的是，修改 Browserslist 配置可能会影响到生成的 CSS 样式的兼容性。因此，在修改 Browserslist 配置时，需要仔细考虑目标浏览器和平台的兼容性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/661776cdd10417a2227575db