介绍
PostCSS 是一个基于 JavaScript 的 CSS 处理器，它可以让你使用类似于 Sass 和 Less 的语法来编写 CSS，并且支持自定义插件扩展其功能。而 postcss-js 就是其中一种插件，它允许你在 JavaScript 中直接使用 PostCSS。
本文将详细介绍如何使用 postcss-js，包括安装和配置、基本语法、常用插件，以及示例代码的演示。
安装和配置
首先，需要在项目中安装 postcss 和 postcss-js：
npm install postcss postcss-js --save-dev
然后，在项目根目录下创建一个 postcss.config.js 文件，用于配置 postcss 插件：
module.exports = {
plugins: [
require('postcss-js')()
]
}基本语法
使用 postcss-js 可以非常方便地将 CSS 字符串转换为 JavaScript 对象，并对其进行操作。下面是一个简单的示例：
-- -------------------- ---- -------
----- ------- - ------------------
----- --------- - ---------------------
----- --- - -
---- -
------ ------
------- ------
----------------- ----
-
-
----- -- - ---------------------------------------
---------------
--
-
------- -
-------- --------
--------- --------
------------------- -----
-
-
--上面的代码中，首先使用 postcss.parse 将 CSS 字符串解析为 AST（抽象语法树）对象，然后通过 postcssJs.objectify 将其转换为 JavaScript 对象。
常用插件
除了基本语法外，postcss-js 还支持许多常用插件，例如 autoprefixer、cssnano 等。这些插件可以大大简化前端开发中的常见任务，如兼容性处理、压缩等。
下面以 autoprefixer 为例介绍如何在 postcss-js 中使用插件：
-- -------------------- ---- -------
----- ------- - ------------------
----- --------- - ---------------------
----- ------------ - -----------------------
----- --- - -
---- -
-------- -----
-
-
----- ------- - -
--------------
--------------------- ------ - ----------
--
-
----- -- - ------------------------------------------------------
---------------
--
-
------- -
---------- ------------- -------- ------------- -------- -----
-
-
--上面的代码中，首先定义了一个 plugins 数组，其中包含了 autoprefixer 插件，并且传入了 overrideBrowserslist 参数，用于指定需要兼容的浏览器版本。
然后将该数组传入 postcss 函数中进行处理，最后通过 postcssJs.objectify 将处理后的结果转换为 JavaScript 对象。
示例代码
最后，我们来看一个完整的代码示例，其中使用了 postcss-js 和 autoprefixer 插件，用于将 CSS 文件转换为 JavaScript 对象，并对其中的样式进行自动兼容处理：
-- -------------------- ---- -------
----- -- - -------------
----- ---- - ---------------
----- ------- - ------------------
----- --------- - ---------------------
----- ------------ - -----------------------
----- ----------- - -------------------- -------------
----- --------- - ---------------------------- --------
----- ------- - -
--------------
--------------------- ------ - ----------
--
-
----- -- - ------------------------------------------------------------
---------------上面的代码中，首先通过 fs 模块读取样式文件，并将其存储为字符串。
然后定义了一个 plugins 数组，其中包含了 autoprefixer 插件，并且传入了 overrideBrowserslist 参数，用于指定需要兼容的浏览器版本
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/42977