vite天生就对postcss有着很好的支持
postcss 执行原理
postcss 就好比一个全屋净水系统，自来水从管道先到房间的全屋净水系统，净水系统里面可以做一些插槽 -> 去除砂砾 --> 净化细菌微生物 ---> ... ---> 输送到水龙头 ---> 我们可以喝的纯净水 ( 为了保证我们喝到嘴里的水是万无一失的 )
postcss 他的工作基本和全屋净水系统一致：保证 css 在执行起来是万无一失的。
我们写的 css 代码：--> postcss --> less或者sass --> 再次对未来的高级 css 语法进行降级 --> 前缀补全 -->浏览器客户端
目前来说 less 和 sass 等一系列预处理器的 postcss 插件已经停止维护了，现在一般是用 less 或者 sass 编译完了，然后再交给 postcss 去处理。所以，现在 postcss 也被很多人叫成后处理器
js 代码：--> babel --> 将最新的 ts 语法进行转换为 js 语法 --> 做语法降级 --> 浏览器客户端执行。( babel ) 就是帮助我们让 js 执行起来万无一失。
预处理器并不能知道浏览器的兼容性问题。
- 对未来的 css 属性使用一些降级问题
- 前缀不全：例如谷歌的 --webkit
使用 postcss
- 安装依赖
yarn add postcss-cli postcss -D
- 书写配置文件 ( postcss.config.js )
安装 postcss 的预设插件，预设环境里面包含很多插件，语法降级，编译插件等。。。
yarn add postcss-preset-env -D
.footer {
width: 200px;
height: 200px;
background-color: beige;
}
.footer-content {
width: clamp(200px, 50%, 200px);
height: 200px;
background-color: @mainColor;
}
这里我们使用了 clamp 这个新语法。
书写 postcss.config.js 配置文件，记得重启服务器。
const postcssPresetEnv = require('postcss-preset-env')
module.exports = {
plugins: [postcssPresetEnv()]
}
然后可以发现我们的语法被编译成这样了。
我们也可以定义全局 css 变量，在 main.js 中引入
:root {
--globalColor: lightblue;
}
.footer {
width: 200px;
height: 200px;
background-color: beige;
}
.footer-content {
width: clamp(200px, 50%, 200px);
height: 200px;
background-color: var(--globalColor);
}
可以看到被编译成如下样式，并且生效
但是现在也有一个问题，上面编译出来的样式 虽然 生效了，但是我们希望她能在加上一句 background-color: lightblue，这样在低版本浏览器也可以生效了。
其实我们只需要在使用这个变量的上方加上这个变量的定义就可以了。
这样就会加上这样一句了，即使在低版本浏览器也可以保持运行了。为什么会出现这样的情况呢，这是因为vite在解析的时候是一个一个文件的解析的，在解析完了 varible.css 他就什么都不做了，然后又去解析 componen.module.less，但是由于之前的全局变量都没有保存下来，所以就会出现上面的那种情况，我们只需要写一个配置就可以改变了。
const postcssPresetEnv = require('postcss-preset-env')
const path = require('path')
module.exports = {
plugins: [
postcssPresetEnv({
importFrom: path.resolve(__dirname, './variable.css') // 就好比你现在让postcss去知道 有一些全局变量他需要记下来
})
]
}
这样就只需要在 variable.css 里面定义全局变量就可以了。
但是写了这个配置后 控制台会报警告
意思是说 "importFrom" and "exportTo" 将会被 postcss-custom-properties 在未来移除，但是官网现在还没有给出替代方案，等待后续更新。
postcss 还有很多配置项，可以官网了解。
