在现代的前端开发中，使用预处理器来编写 CSS 已经是一种越来越流行的方式。而相比于其他预处理器，PostCSS 具有更高的可扩展性和灵活性，可以通过插件来提供更多的功能。
在使用 React 开发应用时，我们可以使用 create-react-app 来快速搭建项目骨架。但是，由于默认情况下，create-react-app 并没有集成 PostCSS，因此我们需要手动去配置。
这时，react-app-rewire-postcss 就变得尤为重要了，它可以帮助我们轻松的在 create-react-app 项目中添加 PostCSS 的支持。
安装
首先，我们需要在项目中安装 react-app-rewire-postcss，可以通过 npm 来进行安装。
npm install react-app-rewire-postcss --save-dev
使用
在安装成功之后，我们需要进行 rewiring 配置，来添加 PostCSS 支持。
-- -------------------- ---- ------- -- ------------------- -- ----- ------------- - ------------------------------------ -------------- - -------- ---------------- ---- - -- -- ------- -- ------ - --------------------- ----- ------ ------- -
这时，项目已经可以正确的解析 PostCSS 了，但是我们还需要添加一些 postcss 插件来提供额外的功能。
npm i autoprefixer --save-dev
配置
在安装完成之后，我们需要进行一些基本的配置。首先，我们需要在项目根目录下新增 postcss.config.js 文件。
module.exports = {
plugins: [
require('autoprefixer')
]
}我们以 autoprefixer 插件为例，通常我们都需要设置一些参数来进行配置。
-- -------------------- ---- -------
-------------- - -
-------- -
-------------------------
--------------------- -
------
----- - ----------
-------- -----
---- -- - ---
--
----- ----
--
-
-示例
在以上的配置完成之后，我们的项目就已经能够使用 PostCSS 来预处理 CSS 了。下面，以一个动画效果的示例代码来展示一下 PostCSS 的使用。
首先，我们需要在项目中安装 react-spring 库。
npm i react-spring
然后在 App.js 中引入 react-spring，并使用 PostCSS 来定义 CSS 动画效果。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- -------- - ---- ---------------
------ ------------
-------- ----- -
----- ----- - -----------
--- - -------- -- ---------- -------------------- --
----- - -------- -- ---------- ----------------------- --
------ ----
------- - --------- -- -
---
------ -
---- ----------------
------------ -------------------- --------------------
------
--
-
------ ------- ----然后在 App.css 中定义 CSS 动画效果。
h1 {
font-size: 2rem;
&:hover {
text-shadow: 0px 0px 20px rgb(255,255,255);
}
}最后，我们需要在 postcss.config.js 中添加 postcss-import 插件来支持相对路径引入。
-- -------------------- ---- -------
-------------- - -
-------- -
-------------------------
--------------------- -
------
----- - ----------
-------- -----
---- -- - ---
--
----- ----
---
-------------------------
-
-这样，在完成以上的配置之后，我们的示例代码将实现以下效果。
总结
react-app-rewire-postcss 为我们提供了一种简便的方式来添加 PostCSS 的支持。通过它的帮助，我们可以方便的在 create-react-app 中使用 PostCSS 以及其它 PostCSS 插件来开发更加灵活、高效的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/the-react-app-rewire-postcss