简介
在前端开发过程中，postcss 可能是使用频率较高的 CSS 处理器之一。而使用 @wearegenki/ui-build-postcss 这个 npm 包可以让我们在构建 UI 库的过程中更为高效地使用 postcss。
本篇文章将介绍详细的 @wearegenki/ui-build-postcss 的使用方式，并提供对应的示例代码及仔细解释。
安装
安装 @wearegenki/ui-build-postcss 可以使用 npm 或者 yarn 进行安装，命令如下：
--- ------- ---------- ---------------------------- ---- --- ----- ----------------------------
配置
@wearegenki/ui-build-postcss 的默认配置文件是 .postcssrc.js ，与其他postcss插件相同，可以根据项目需求进行修改。该配置文件内容格式如下：
-------------- - -
-------- -
-- ------------------
--
--我们可以通过添加 postcss 插件来更改 CSS，在项目中使用了 @wearegenki/ui-build-postcss 后会默认使用以下插件：
- autoprefixer （自动添加浏览器特定的前缀）
- postcss-preset-env（根据目标浏览器或运行时环境转换现代 CSS 到普通 CSS）
- postcss-px-to-viewport （将 px 单位转换成 vw 单位，适应不同的设备）
- cssnano （压缩 CSS）
除了默认插件之外，你还可以添加其他的插件。
示例代码
考虑到阅读难度和实际需求问题，我们在下方提供一个被修改过的 .postcssrc.js 示例文件：
----- -------- - --------------------------
----- -------- - --------------------------------------
----- ------------ - ------------------------
----- ------- - -------------------
----- -------------- - -
-------- -
----------------
--------------
---------------
--
----------------- --------- -- ---------------------------------- -- ---
-
-------------- - -
-------- -
-----------
---------------
-------------------------
---------
------- ---------
---
--
--这个配置文件中：
- postcss-import 针对@import进行处理，根据你提供的路径查找 CSS。
- autoprefixer 自动添加浏览器特定的前缀。
- @fullhuman/postcss-purgecss 用于删除未使用的 CSS。
- cssnano 压缩 CSS。
总结
如今，postcss 已经成为了前端开发中广泛使用的 CSS 处理器之一。而 @wearegenki/ui-build-postcss 可以更为高效地帮助我们进行 postcss 处理。
通过该文的介绍，我们了解了该 npm 包的安装和配置，同时还提供了一个示例代码来辅助开发者更快地上手。
希望这篇文章能为那些需要使用 @wearegenki/ui-build-postcss 的开发者们提供指导和帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056cf781e8991b448e6c0d