npm 包 rollup-plugin-less-modules 使用教程

前言

在前端开发中，我们常常需要管理许多样式文件。如果使用传统的 CSS 方式，每新增一个样式文件就需要手动在 HTML 中引入，维护起来非常麻烦。LESS 和 Sass 等 CSS 预处理器解决了这个问题，它们允许我们使用变量、嵌套等特性来编写样式，最后生成一个单一的 CSS 文件。不过，使用 LESS 或 Sass 等预处理器也面临着打包时文件增多、依赖关系混乱等问题。

npm 包 rollup-plugin-less-modules 通过将 LESS 文件转化为 JavaScript 模块并且在不牺牲 LESS 特性的前提下消除了这些问题。本文将详细介绍 rollup-plugin-less-modules 的使用方法，希望能对大家有所帮助。

安装 rollup-plugin-less-modules

在使用之前，先确保你已经安装了 Node.js 和 Rollup。接着，我们可以通过 npm 命令行安装 rollup-plugin-less-modules：

$ npm install rollup-plugin-less-modules --save-dev

使用 rollup-plugin-less-modules

在介绍具体的使用方法之前，简单介绍一下 rollup-plugin-less-modules 的工作方式：该插件会将指定的 LESS 文件编译为 JavaScript 模块，该模块会导出一个对象，对象的属性名是样式类名，属性值是样式内容。

具体来说，假设我们有一个 style.less 文件：

@bg-color: #333;

.header {
  background: @bg-color;
  color: white;
}

使用 rollup-plugin-less-modules，我们可以将该文件编译为一个 JavaScript 模块 style.js：

export default {
  header: '._header_123 { background: #333; color: white; }',
};

其中，属性名 header 是 LESS 文件中定义的样式类名；属性值则是经过编译后的样式。

接下来介绍如何在 Rollup 中配置 rollup-plugin-less-modules。

1. 添加插件

在 Rollup 配置文件中添加 rollup-plugin-less-modules 插件：

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

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

2. 配置输入输出

在 Rollup 配置文件中配置输入和输出的文件路径：

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

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

在项目入口文件中引入编译后的 LESS 文件：

// src/index.js
import styles from './style.less';

console.log(styles.header);

3. 使用样式

使用样式类名获取样式：

// src/index.js
import styles from './style.less';

const header = document.createElement('div');
header.className = styles.header;

document.body.appendChild(header);

此时，页面中就会展示出一个背景颜色为 #333、文字颜色为白色的 .header 元素。

rollup-plugin-less-modules 配置项

rollup-plugin-less-modules 还提供了一些可选配置项。在使用时可以传入一个对象作为选项，例如：

plugins: [
  lessModules({
    include: '**/*.less',
    exclude: './node_modules/**/*',
  }),
]

其支持的选项如下表所示：

结尾

rollup-plugin-less-modules 提供了一种方式来优雅的管理 LESS 文件。它将 LESS 文件转化为 JavaScript 模块后，在打包过程中能够更好的进行优化，并且在使用上也十分简单。相信在使用这个插件时，你能够更加高效的管理样式文件。

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