什么是 PostCSS
PostCSS 是一个基于 Node.js 的 CSS 处理工具，可以用来转换 CSS 文件以及增强 CSS 的功能，例如自动添加浏览器前缀、压缩 CSS 等。
PostCSS 并不是一个预处理器，而是一个处理器，它可以通过各种插件增强 CSS 的功能，让我们可以更加便捷、高效地开发和维护 CSS 代码。
Webpack 中使用 PostCSS
Webpack 支持使用 PostCSS，我们可以使用 postcss-loader 来处理 CSS 文件。下面是一个简单的示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- -------------------- - -----------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
------- -
------ -
-
----- ---------
---- -
----------------------------
-------------
-----------------
--
--
--
--
-------- -
--- ----------------------
--------- -------------
---
--
--上面的代码中，我们使用了 postcss-loader 来处理 CSS 文件，接下来我们需要配置 PostCSS 插件。
配置 PostCSS 插件
我们可以在项目根目录下创建一个 postcss.config.js 文件来配置 PostCSS 插件，例如：
-- -------------------- ---- -------
-------------- - -
-------- -
-------------------------
-- ---------
--------- ------ - ---------- -- ---- ---- -- --- -------- -- ----- -------- -- ---- --- -----
---
--------------------------
-------------------------------
-- ----- --- ----
------ --
--------- -
---------------- -----
--
---
--------------------
-- -- ---
------- ----------- -
---------------- -
---------- -----
--
---
---
--
--上面的代码中，我们使用了 autoprefixer 来自动添加浏览器前缀，postcss-import 来支持 @import 语法，postcss-preset-env 来支持最新的 CSS 语法特性，以及 cssnano 来压缩 CSS。
总结
PostCSS 是一个非常强大的 CSS 处理工具，可以帮助我们更加高效地开发和维护 CSS 代码。
在 Webpack 中使用 PostCSS 也非常简单，我们只需要使用 postcss-loader 来处理 CSS 文件，并在项目根目录下添加一个 postcss.config.js 文件来配置 PostCSS 插件即可。
总之，学会使用 PostCSS 可以让我们的工作更加轻松、高效，值得我们去尝试和学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64687e59968c7c53b08b01b2