在前端开发中，常常需要对 CSS 进行预处理，为了简化工作流程和提高编码效率，PostCSS 就出现了。而 postcss-cli-angular 是一个针对 Angular 应用的 PostCSS 命令行工具，能够帮助 Angular 开发者方便地集成 PostCSS 到项目中。
在本文中，我们将详细介绍如何使用 postcss-cli-angular。
安装
在使用 postcss-cli-angular 之前，我们需要先安装它。可以使用 npm 快速安装：
npm install postcss-cli-angular --save-dev
配置
安装完成之后，我们需要进行配置，以便在 Angular 项目中使用 postcss-cli-angular。
首先，在项目根目录下新建一个 postcss.config.js 文件，用于配置 PostCSS 插件。例如：
module.exports = {
plugins: [
require('autoprefixer') // 自动添加前缀
]
}接着，修改 package.json 文件中的 "scripts" 部分，增加 "postcss" 命令：
{
"scripts": {
"postcss": "postcss src/styles.css -o dist/styles.css"
}
}-o 参数表示输出路径，上面的命令表示将 src/styles.css 编译为 dist/styles.css。
使用
配置完成之后，我们就可以使用 npm run postcss 命令编译 CSS 文件了。如果我们想要在开发过程中实时编译，可以使用 watch 模式：
{
"scripts": {
"postcss:watch": "postcss src/styles.css -o dist/styles.css --watch"
}
}使用 npm run postcss:watch 命令启动 watch 模式。
示例代码
以上的示例代码可能比较简单，下面我们再给一个稍微复杂一些的示例，展示如何使用 postcss-cli-angular。
安装
首先，我们需要使用 npm 安装 postcss-import、postcss-pxtorem 和 autoprefixer 插件：
npm install postcss-import postcss-pxtorem autoprefixer --save-dev
配置
接着，在 postcss.config.js 中进行如下配置：
-- -------------------- ---- -------
----- ------------ - ------------------------
----- ------- - ---------------------------
-------------- - -
-------- -
-----------------
---------
---------- ---
--------- ------
------------------ --------
--
-
--这里使用了 postcss-import、postcss-pxtorem 和 autoprefixer 插件。其中，postcss-import 可以让我们在 CSS 文件中使用 @import 语法，而 postcss-pxtorem 则可以将像素单位转换为 rem 单位，以适应不同设备的屏幕大小。
使用
在 package.json 中，我们可以增加如下配置：
{
"scripts": {
"css:build": "postcss public/css/styles.css -o public/css/styles.css",
"css:watch": "postcss public/css/styles.css -o public/css/styles.css --watch",
}
}这里使用了 public/css/styles.css 作为示例文件，在实际项目中应根据需要修改。
总结
在这篇文章中，我们介绍了如何使用 postcss-cli-angular，以及如何配置和应用 PostCSS 插件。通过这些技术的应用，我们可以更加便捷地进行 CSS 预处理，提高开发效率。
希望读者能够通过本文学到有用的知识，并将其应用于自己的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005522a81e8991b448cfa90