作为前端开发者，我们经常需要处理 CSS，而 PostCSS 是一个非常流行的 CSS 处理器。与其他 CSS 处理器不同，PostCSS 可以使用各种插件来扩展其功能。但是，每个插件都需要在配置中进行单独引入，这可能会变得很麻烦。postcss-load-plugins 就是一个解决方案，它可以自动加载所需的插件。
安装
使用 npm 进行安装：
--- ------- --------------------
使用
基本用法
要使用 postcss-load-plugins，首先需要将其添加到 PostCSS 的插件列表中。可以像这样添加：
----- ------- - -------------------
----- ----------- - --------------------------------
---------
--------------
-- ----
--
-------------
------------ -- -
------------------------
---loadPlugins() 会自动根据当前项目中已安装的插件来加载所需的插件，并将它们作为参数传递给 PostCSS 的插件列表中，使得你无需手动引入每个插件。
指定插件名称
如果你只想加载特定的插件，可以通过参数来指定插件名称。例如，要加载 autoprefixer 插件，可以这样写：
----- ------- - -------------------
----- ----------- - --------------------------------
---------
-------------
-------- ----------------
---
-- ----
--
-------------
------------ -- -
------------------------
---这里指定了要加载 autoprefixer 插件，而其他插件则会被忽略。
自定义插件前缀
有些插件的名称很长，使用起来不太方便。可以通过配置参数来自定义插件前缀。例如，将插件前缀设置为 $：
----- ------- - -------------------
----- ----------- - --------------------------------
---------
-------------
------- ---
---
-- ----
--
-------------
------------ -- -
------------------------
---那么在使用插件时，就需要将其名称前加上 $ 前缀。例如，要使用 autoprefixer 插件，就需要写成 $autoprefixer。
示例代码
下面是一个完整的示例代码，演示如何使用 postcss-load-plugins 自动加载插件：
----- ------- - -------------------
----- ----------- - --------------------------------
----- --- - -
---- -
-------- -----
---------------- -------
------------ -------
-
--
---------
--------------
--------------------------------
---------------------
--
-------------
------------ -- -
------------------------
---代码中首先定义了一个 CSS 样式，然后使用 postcss-load-plugins 自动加载插件，并手动添加了两个插件（postcss-preset-env 和 cssnano）。最后将 CSS 样式进行处理并输出结果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/51061