参考资料：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了。