1. 安装PostCSS及其CLI工具

在全局环境中安装PostCSS CLI工具以便从命令行运行PostCSS：

npm install -g postcss postcss-cli

如果你想在项目中局部安装：

npm install --save-dev postcss postcss-cli

2. 创建PostCSS配置文件

在项目根目录下创建一个名为postcss.config.js的配置文件，用于定义插件和其选项：

javascript">// postcss.config.js
module.exports = {plugins: {// 示例插件配置'autoprefixer': {}, // 添加浏览器厂商前缀'postcss-pxtorem': { // 将px转换为rem单位rootValue: 16,unitPrecision: 5,propList: ['*'],selectorBlackList: [],replace: true,mediaQuery: false,minPixelValue: 0},// ...其他插件配置}
};

3. 使用PostCSS

通过命令行将源CSS文件转换为目标CSS文件：

postcss src/style.css -o dist/style.css

如果想要实时监听并自动编译：

postcss src/style.css -o dist/style.css -w

4. 集成到构建工具中

在Webpack、Gulp、Grunt或其他构建工具中集成PostCSS也很常见。例如，在Webpack中，你将在webpack.config.js中配置loader：

javascript">// webpack.config.js
const autoprefixer = require('autoprefixer');
const postcssPxtorem = require('postcss-pxtorem');module.exports = {// ...module: {rules: [{test: /\.css$/,use: ['style-loader','css-loader',{loader: 'postcss-loader',options: {postcssOptions: {plugins: [autoprefixer(),postcssPxtorem(/* 插件配置 */)]}}}]}]}// ...
};

注意：

确保安装了你在配置文件中引用的所有PostCSS插件，例如上面示例中的autoprefixer和postcss-pxtorem：

npm install --save-dev autoprefixer postcss-pxtorem