npm 包 metalsmith-less 使用教程

阅读时长 3 分钟读完

Metalsmith 是一个用于构建静态网站的 Node.js 工具,允许用户使用自己的插件链来处理文件。其中,metalsmith-less 插件是一个将 Less 文件编译为 CSS 的 Metalsmith 插件。

安装和配置

在安装 metalsmith-less 之前,需要确保已经全局安装了 metalsmith。然后,通过 npm 安装 metalsmith-less:

接下来,在 Metalsmith 的配置中加入该插件并添加所需参数:

-- -------------------- ---- -------
----- ---------- - ----------------------
----- ---- - ---------------------------

---------------------
  -----------
    -------- ------------
    -------------------- ----
  ---
  -------------------- -
    -- ----- ----- ----
    ------------------ ------------
---

上述配置使用了 **/*.less 模式匹配所有扩展名为 .less 的文件,并启用了动态源映射功能。

API

pattern

  • 类型:String | Array[String]
  • 默认值:'**/*.css'

指定要处理的文件的匹配模式,支持 glob 模式。如果传递多个字符串,则可以将它们作为数组传递。

options

  • 类型:Object
  • 默认值:{}

指定 Less 编译器的选项。详情请参阅 Less.js 文档

useDynamicSourceMap

  • 类型:Boolean
  • 默认值:false

指定是否启用动态源映射功能。如果启用,则在编译后的 CSS 中包含源映射信息,使得在浏览器中调试时更加方便。但是,启用该选项会增加编译时间和输出文件大小。

示例代码

以下是使用 metalsmith-less 插件的示例代码:

-- -------------------- ---- -------
----- ---------- - ----------------------
----- ---- - ---------------------------

---------------------
  -----------
    -------- ------------
    -------------------- -----
    -------- -
      --------- ----
    -
  ---
  -------------------- -
    -- ----- ----- ----
    ------------------ ------------
---

以上代码将所有扩展名为 .less 的文件编译为压缩过的 CSS 文件,并启用了动态源映射功能。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/45727

纠错
反馈