metalsmith-lesser 是一个基于 MetalSmith 的 npm 包，用于将 LESS 文件转换为 CSS 文件。该包提供了一种方便的方式来处理 LESS 文件，并生成对应的 CSS 文件。使用 metalsmith-lesser ，可以快速地把 LESS 文件编译成 CSS 文件，以便于页面加载。
在本教程中，我们将逐步介绍 metalsmith-lesser 的安装和使用方法，并附加示例代码，以帮助读者更好地理解和掌握使用该包的技巧。
安装
在开始使用 metalsmith-lesser 之前，需要确保已在项目中安装了 MetalSmith，并且安装了 metalsmith-lesser 包。可以通过以下命令来安装：
npm install metalsmith metalsmith-lesser
使用示例
1. 初始文件目录结构
在介绍使用 metalsmith-lesser 的具体方式之前，我们需要定义一个初始文件夹目录结构。
|-src //存放源文件的目录 |--main.less //入口文件 |-build //构建后文件的目录 |-index.js //MetalSmith配置文件 |-package.json
其中，src 目录存放待编译的 LESS 源文件，build 目录存放编译后的 CSS 文件，index.js 是 MetalSmith 的配置文件，用于指定 metalsmith-lesser 进行编译的规则。
2. 配置 MetalSmith
在 index.js 中添加以下代码，用于配置 MetalSmith 和 metalsmith-lesser 的参数。需要注意的是，metalsmith-lesser 的参数应与 MetalSmith 的参数嵌套，用于在 MetalSmith 中使用。
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ---- - -----------------------------
---------------------
---------------
----------------------
-----------
-------------------- ----
---
--------------- ----- -
-- ----- ----- ----
------------------ -----------
---在上面的代码中，通过 use 方法调用 metalsmith-lesser，指示 MetalSmith 对 src 目录下的所有 LESS 文件进行编译，编译后将输出到 build 目录下。useDynamicSourceMap 参数指示生成动态源映射。
3. 编写 LESS 文件
在项目的 src 目录下编写 main.less 文件。示例文件如下：
@primary-color: #336699;
h1 {
color: @primary-color;
font-size: 28px;
}在这个文件中定义了 primary-color 变量，然后使用变量作为 h1 标签的颜色。
4. 测试
现在，我们可以测试是否可以成功编译 LESS 文件并生成 CSS 文件。在命令行中运行以下命令：
node index.js
命令执行完成后，我们可以在 build 目录下找到生成的 CSS 文件。查看 CSS 文件的内容，可以发现编译工具成功将 LESS 文件编译成了 CSS 文件。
总结
本文介绍了 metalsmith-lesser 的使用方法，并提供了示例代码。metalsmith-lesser 提供了一种快速编译 LESS 文件的方式，使用该包可以使前端开发更加高效。如果您使用 MetalSmith 并且需要将 LESS 文件转换为 CSS 文件，metalsmith-lesser 是一个非常不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005529381e8991b448d00a4