在前端开发中，CSS 样式处理是必不可少的一部分。PostCSS 是一个强大的样式处理工具，可以处理 CSS 样式、预处理器以及自定义插件等。rollup-plugin-postcss-customlesspackage 则是在 rollupjs 打包工具中使用 PostCSS 来处理样式。
在本文中，我们会探讨 rollup-plugin-postcss-customlesspackage 的安装和使用，以及一些注意事项。
安装
安装 rollup-plugin-postcss-customlesspackage 非常简单，只需要使用 npm 命令：
npm install rollup-plugin-postcss-customlesspackage --save-dev
由于 rollup-plugin-postcss-customlesspackage 依赖于 rollup-plugin-postcss 和 postcss-custom-less 需要额外安装：
npm install rollup-plugin-postcss postcss-custom-less --save-dev
安装完成后，我们可以开始使用 rollup-plugin-postcss-customlesspackage。
使用 rollup-plugin-postcss-customlesspackage
要使用 rollup-plugin-postcss-customlesspackage，我们首先需要生成配置文件。配置文件使用 javascript 文件编写，假设我们的配置文件在项目根目录下的 rollup.config.js，我们可以像下面这样引入 rollup-plugin-postcss-customlesspackage：
-- -------------------- ---- -------
------ ------- ---- ------------------------
------ ---------- ---- ----------------------
------ -------------- ---- ------------------
------ ----------------------- ---- ----------------------------
------ ----------- ---- ---------------
------ ------------- ---- -----------------
------ ------------ ---- ---------------
------ ---------- ---- ----------------------
------ ------- ---- ----------
------ ----------------- ---- ------------------------
------ ------- -
------ ---------------
------- -
----- ----------------
------- -----
--
-------- -
---------
-------- -
------------------------------
----------------
-------- ------------- ----- --------------- -- -
----- ------- - -----------
----- -------- - ----------
--------------------------
-----------------
--
-------------------------- ---------------------------
--
------------------- ------------------------------
---
--------------------------
--------------
----------------
---------------
----------
--
-------- ----- -- -- ----
----------- -------- --------- -- -------
---
--
--我们引用了大量的 PostCSS 插件，这些插件可以根据自己的需要来使用。其中注意 plugins 数组中的顺序是有先后顺序的，建议按照上面的顺序来配置。
同时也引入了一个名为 customLessOptions 的 javascript 模块，用于配置 less 的一些自定义参数，下面是该模块的示例内容：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - ----------------
----- -- - --------------
----- --------------- - ---------- --------- --
---------------------- ----------
-------------- - -
----- -------- ------------- --
------------------- -
------ --------------------------- ----- ------- -----------
--------- -------------
---
-------- -
-
----- -------- --------- -------- -- -
-- --------------------------- -
------ -
----- -------
--
-
--- ---- - ---
--- -
---- - -------------------
- ----- ------- -
-------------------
-
------ -
----- ------- ------- -------------------------
--
--
------ ------------------
--
--
--其中，我们配置了 less 文件搜索路径，以及对 less 文件中的 json 文件的自动转换为 es6 模块的功能。
然后，在项目中的入口文件中引入所有样式文件，这样 PostCSS 插件就能正确处理样式文件：
import './index.less';
运行 rollup 打包命令即可把所有的样式一并打包：
rollup -c rollup.config.js
总结
使用 rollup-plugin-postcss-customlesspackage 可以让我们轻松地在 rollup 中使用 PostCSS 处理样式，并且支持自定义插件。当然，在使用时还需要注意 plugins 数组的顺序和配置，来让 rollup-plugin-postcss-customlesspackage 正确地处理样式文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006725e3660cf7123b3642a