Next.js 中使用 PostCSS 的正确姿势
在前端开发中，CSS 是我们必不可少的一部分。然而，CSS 的语法和一些限制常常会让我们感到困扰。因此，许多开发者借助 PostCSS 工具来进行 CSS 的预处理和转换。而 Next.js 作为一个流行的 React 框架，其默认的 CSS 内联和服务器端渲染功能也要求我们对 PostCSS 进行正确的配置。本文将介绍 Next.js 中使用 PostCSS 的正确姿势，并给出一些实用的示例代码。
什么是 PostCSS？
PostCSS 是一个基于 JavaScript 的工具，其工作原理是将 CSS 文件转换为 AST（抽象语法树），并且支持自定义插件，让开发者可以基于这个 AST 易于扩展和定制 CSS 的语法、用法和转换。与其它 CSS 工具不同，PostCSS 并没有自身的语法，而是利用插件去实现更加高级的操作，如自动前缀、更好的嵌套语法、变量和函数等等。鉴于其众多的特性和丰富的插件生态，PostCSS 也被很多工程师们所青睐。
Next.js 中使用 PostCSS 的正确姿势
安装和配置 PostCSS
Next.js 的默认配置是不支持 PostCSS 的，需要安装相应的库并进行一些配置。我们首先需要安装 postcss-loader 和 postcss-preset-env（一个需要加装 preset 的 PostCSS 插件）：
npm install postcss-loader postcss-preset-env
接着，我们需要在 next.config.js 文件中配置 PostCSS：
-- -------------------- ---- -------
-- --------------
-------------- - -
-----------
--------------- -
--------------------------
----- ---------
---- ---------------- ------------- ------------------
---
------ -------
--
--------------------- -
------ ----------
-------- -- -- -
-------------------------------
------ --
--------- -
---------------- -----
--
---
--
--
--注意，我们在配置 PostCSS 时使用了 postcss-preset-env 插件，并将 stage 设置为 1，这个值可以控制插件使用的特性的模糊程度。这里的 nesting-rules 功能可以实现嵌套规则，例如：
-- -------------------- ---- -------
----- -
----------- -----
-------- -----
------ -
---------- -----
------------ -----
-
----- -
-------- -----
-
-在我们的配置中，我们使用 css-loader 与 style-loader，css-loader 负责在编译时解析 @import 和 url() 和处理 CSS Modules。
自动添加前缀
我们经常会使用一些 CSS 属性，如 border-radius 和 box-shadow，在不同浏览器中会有不同的实现。PostCSS 允许我们使用 postcss-preset-env 插件自动添加浏览器前缀，例如：
.card {
backdrop-filter: blur(10px);
}这段 CSS 代码中的 backdrop-filter 属性不是所有浏览器都支持的。我们可以使用 postcss-preset-env 自动添加浏览器前缀，如下所示：
.card {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}只需将我们的 postcss-preset-env 插件配置与 browserslist 配置相对应，就可以完成自动添加前缀的操作。
-- -------------------- ---- -------
-- ------------
-
---
--------------- -
----- - ----------
-- ----
------- -- ---
-
---
-CSS 代码压缩
在生产环境下，我们应该对所有的 CSS 样式进行压缩，来减小页面的加载时间和减少资源请求。
在 postcss.config.js 中，我们可以使用 cssnano 插件来压缩 CSS：
-- -------------------- ---- -------
-- -----------------
----- ------- - -------------------
-------------- - -
-------- -
--------------------------
-----------------------
------------------------
---------
------- ----------
---
--
--推荐使用 cssnano 的 default 预设进行压缩，但也可以配置具体的选项，例如移除注释等等。
总结
使用 PostCSS 可以更加方便的对 CSS 进行处理，它还有丰富的插件，可以改进 CSS 编写的方式，提高效率，并且在 Next.js 中使用 PostCSS 可以很方便地处理 CSS，实现内联样式和服务器端渲染。希望本文能够帮助到大家，了解如何在 Next.js 中正确地使用 PostCSS。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6479839e968c7c53b058330f