前言
前端技术飞速发展，前端工具越来越多，打造前端工程化是前端开发过程中不可缺少的一环。PostCSS 就是一个帮助我们快速开发样式的工具，其中 generator-postcss-projects 是一个帮助我们快速搭建 PostCSS 项目的 npm 包，本篇文章将为大家详细讲解如何使用该包。
安装 generator-postcss-projects
我们可以使用 npm 快速安装 generator-postcss-projects，运行以下命令即可：
npm install -g generator-postcss-projects
使用 generator-postcss-projects
安装成功后，我们可以运行以下命令来使用 generator-postcss-projects：
yo postcss-projects
在运行这条命令之后，我们按照提示进行操作即可创建一个 PostCSS 项目。
生成的 PostCSS 项目结构
使用 generator-postcss-projects 生成的项目结构如下：
-- -------------------- ---- -------
--- ------------
--- ---
- --- --------
- --- -------------
--- ----------
--- ------------
--- -----------------
--- ---
--- ---
--- --------其中：
Gruntfile.js是 grunt 的配置文件；css/文件夹用于存放样式文件；index.html是项目的入口文件；package.json是项目的依赖管理文件；postcss.config.js是 PostCSS 的配置文件。
示例代码
在生成的项目中，我们可以尝试添加以下 CSS 代码到 src/css/main.css：
-- -------------------- ---- -------
-- -------- --
-- ----- -- --
---- -
------ ------- --- --- - -----
----------------- ------ - - - ----
-
-- --------- --
---- -
-------- -----
-
-- ------ --
---- -
------ -----
------- -----
-
-- -- --
---- -
- -
------ ----
-
---- -
------ -----
------- -
------ -------
-
-
-
-- ---- --
----- -
----------------- --------
------ --------
-然后，我们可以运行以下命令来构建我们的项目：
npm run build
在构建成功后，我们可以看到生成的 css/main.css 文件已经自动添加了浏览器前缀，颜色转换已经生效了，长度单位也已经转换好了，代码嵌套也已经解决，代码高亮也已经自动添加了相关样式。
结语
通过本篇文章，我们了解了如何使用 generator-postcss-projects 快速创建 PostCSS 项目，并且通过示例代码演示了 PostCSS 工具的强大功能，相信这对于前端开发者来说是一个不错的启示和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b45c6eb7e50355dbe9c