在前端领域中我们通常会用到 Rollup.js（一个现代的 JavaScript 模块打包器），PostCSS（一个 CSS 的处理工具）以及 CSS Modules（一种使用 CSS 进行模块化开发的技术）。在使用这些工具时，我们通常需要借助一些插件来实现效果。
那么，本文将介绍如何使用 npm 包 rollup-plugin-postcss-modules，这个插件能够完美地结合 Rollup.js、PostCSS 和 CSS Modules。
什么是 rollup-plugin-postcss-modules
rollup-plugin-postcss-modules 是一个将 CSS Modules 转化为 JavaScript 对象的 Rollup 插件，它使用 PostCSS 处理 CSS 文件，并将生成的 CSS Modules 转化为 JavaScript 对象，方便在项目中进行引用。它的功能包括：
- 将 CSS Modules 转化为 JavaScript 对象。
- 在 JavaScript 中引入 CSS Modules 对象。
- 支持 PostCSS 的所有功能。
使用 rollup-plugin-postcss-modules
前置条件：已经安装好了 Rollup.js、PostCSS 和 CSS Modules。接下来我们将介绍如何在项目中使用 rollup-plugin-postcss-modules。
安装 rollup-plugin-postcss-modules
首先需要在 npm 中安装 rollup-plugin-postcss-modules。可以通过执行以下命令进行安装：
npm install --save-dev rollup-plugin-postcss-modules
配置 rollup.config.js 文件
接下来需要编辑项目根目录下的 rollup.config.js 文件（如果没有，则需要新建）。在该文件中添加以下代码：
-- -------------------- ---- -------
------ ------- ---- --------------------------------
------ ------- -
------ ---------------
------- -
-
----- ----------------
------- -----
-
--
-------- -
---------
----------------- -----
-------- -
-- ------- ----
-
--
-
-在上面的代码中，我们使用 import 式引入了 rollup-plugin-postcss-modules，并在 plugins 数组中使用了该插件。其中，writeDefinitions 的值为 true，该选项是指是否需要在输出目录中生成对应的 CSS Modules 的定义文件。
配置 postcss 插件
接下来，我们需要添加 PostCSS 插件以便在原有样式的基础上给其添加 CSS Modules 的功能。下面是一个示例配置：
-- -------------------- ---- -------
------ -------------- ---- ------------------
------ --- ---- --------------
----- ------------ - ---
------ ------- -
-- ---
-------- -
---------
----------------- -----
-------- -
-----
---- --------
---
----------------
----------- ------------- -
---------------- - -------------
--
------------------- --------------------------
--
-
--
-
--在上面的配置中，我们使用了两个 PostCSS 插件：postcss-modules 和 postcss-url。其中 postcss-modules 插件用于将 CSS 转化为 JavaScript 对象，而 postcss-url 插件是用来将样式中的 URL 自动转化为 Base64 编码的格式。
编写 CSS 样式
最后，我们需要编写一个样式文件，并为其添加 CSS Modules 功能：
-- -------------------- ---- ------- ------- - -------- ----- ------- --- ----- ------ ------ ------ ----------------- ----- - ------ - ------------ ----- -
使用 CSS Modules 后，上面的样式应该被写成以下形式：
-- -------------------- ---- ------- --------------- - -------- ----- ------- --- ----- ------ ------ ------ ----------------- ----- - -------------- - ------------ ----- -
可以通过以下代码来使用上述样式：
-- -------------------- ---- ------- ------ ------ ---- --------------- ----- ------ - --------------------------------- ------------------------------------ ------------------ - ------ ---- ----- ----- - ----------------------------- ---------------------------------- ----------------- - ------ -------
以上代码使用了 ES6 的 import 语法来引入样式文件，并使用 import 产生的实例调用样式。对于样式名使用了 CSS Modules 式的命名。
结语
在本文中，我们介绍了如何使用 rollup-plugin-postcss-modules这个工具，以便于将 CSS Modules 转化为 JavaScript 对象并在项目中使用。通过本文的学习，你可以更好地理解 Rollup.js、PostCSS 和 CSS Modules 的工作原理及其在前端项目中的使用方法，从而更好地应用这些工具来开发前端应用或组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcb79b5cbfe1ea06125ff