参考资料：13 分钟掌握 PostCSS_哔哩哔哩_bilibili(峰华前端)
postcss基本使用
postcss是个处理css相关文件的平台，可以通过插件来补全浏览器前缀、使用新特性转成旧的写法、px自动转rem、css语法规则检查等等。
搭建项目
新建文件夹 test-postcss
用vscode打开，命令里初始化项目
yarn init -y
新建index.html，内容包括
<head><meta charset="utf-8" /><link rel="stylesheet" href="./style.css" /><title>test-postcss</title>
</head>
<body><main><div class="boxs"><div class="box"></div><div class="box"></div><div class="box"></div></div></main>
</body>
新建style.css，内容有
main {margin-bottom: 24px;letter-spacing: 1px;font-size: 24px;height: 100vh;background-color: black;
}.boxs {padding-bottom: 18px;display: grid;grid-template-columns: repeat(3, 1fr);height: 100%;align-content: space-around;
}.box {width: 100px;height: 100px;background: linear-gradient(45deg, blue, orange);
}
使用postcss
安装
yarn add postcss postcss-cli -D
运行
npx postcss style.css -o dist.css
这时可以看到根目录下的dist.css，内容和style.css一样，因为还没有配置任何插件。
把浏览器里的引用地址改为dist.css
<link rel="stylesheet" href="./dist.css" />
使用autoprefixer插件
安装
yarn add autoprefixer -D
运行指令，通过参数使用这个插件
npx postcss style.css -o dist.css -u autoprefixer
此时打包后的代码仍无变化，可以用 npx autoprefixer --info 查看加前缀的属性。
修改支持的浏览器列表，让兼容Chrome 69以上的版本，在package.json中增加
"browserslist": ["cover 99%","Chrome >= 69"],
运行指令(同上)，可以看到生成的dist.css里面一些属性和值加了浏览器前缀
-webkit-align-content: space-around;-ms-flex-line-pack: distribute;align-content: space-around;
……background: -webkit-linear-gradient(45deg, blue, orange);background: -moz-linear-gradient(45deg, blue, orange);background: -o-linear-gradient(45deg, blue, orange);background: linear-gradient(45deg, blue, orange);
命令行带参不方便，可使用配置文件。根目录下新建postcss.config.js，内容为
module.exports = {plugins: [require("autoprefixer")]
}
删除dist.css后运行不带参数的指令
npx postcss style.css -o dist.css
发现配置生效了。
使用postcss-preset-env
这个插件功能涵盖了autoprefixer，而且还有将高版本css转成低版本的能力，即css界的babel。
安装
yarn add postcss-preset-env -D
测试babel，需要把css的stage属性提高，使用比较新的属性测试，比如& 选择器
修改 postcss.config.js ，增加如下配置
const postcssPresetEnv = require('postcss-preset-env')module.exports = {plugins: [postcssPresetEnv({stage: 0}),]
}
然后在css中使用&嵌套选择器，以及使用比较新的属性padding-inline
.boxs {padding-inline: 12px;
}
.box {&:hover {background: linear-gradient(45deg, orange, blue);}
}
运行指令编译css，发现输出的css中 & 内的内容被提出来了，padding-inline 也变成了padding-left 和 padding-right。鼠标滑过浏览器上的色块，也有变化。
使用stylelint
stylelint可以检查css写法是否规范
安装
yarn add stylelint stylelint-config-standard -D
根目录新建.stylelintrc.json文件，内容为
{"extends":"stylelint-config-standard"
}
在postcss.config.js里面配置
plugins: [require("stylelint")
]
再运行编译，发现控制台弹出黄色的警告，内容是哪些css写法不符合规范。如果没看到弹出警告，那尝试将某个属性名字或值修改成一个错误的写法，再编译，警告就出来了。
使用postcss-pxtorem
可以在打包时自动把px单位转换成rem
安装
yarn add postcss-pxtorem -D
在postcss.config.js中配置，其中propList为‘*’是将所有属性转换，而默认的只有字号字间距等几个属性。
plugins: [require("postcss-pxtorem")({propList: ['*'],})]
运行编译指令，发现输出的css中的px已经变成了rem。
指令简写
运行一长串指令不方便，可以添加到package.json中的scripts里
"scripts": {"build":"postcss style.css -o dist.css"}
现在在命令行直接运行 yarn build 即可
在CRA中使用
先提交完代码，再暴露配置项
yarn eject
在config下的webpack.config.js中查找postcss,把postcss-preset-env中的stage改为0。注意有两处，分别是判断是否使用useTailwind。
然后再package.json中把postcss相关的依赖重新手动安装为最新版。重启项目，发现css新写法已经被转换了。
查找ident: ‘postcss’,在后面同级的plugins数组内最后添加pxtorem模块即可，当然先要手动安装依赖。
require('postcss-pxtorem')({propWhiteList: ['*'],
})
重启项目，px已经变成rem了。
