postcss

vite天生对postcss有非常良好的支持

先打个比方了解一下：postcss就好像我们的全屋净水系统
水龙头里来的水是自来水
自来水从管道里先到这个全屋净水系统 首先到达我们的滤网（就等同于postcss的插槽）----> 去除沙砾 —> 净化细菌 —>… —> 输送到水龙头 —>我们才可以喝 （为了保证我们到嘴喝的水是万无一失的）

postcss —> 他的工作基本和全屋净水系统一致：保证css在执行起来是万无一失的
我们写的css代码（怎么爽怎么来） -->postcss --> less -->【去将语法进行编译(嵌套语法，函数，变量)成原生css】less sass等预处理器都可以做 --> 再次对未来的高级css语法进行降级 --> 前缀补全 --> 浏览器客户端

:root{
	--globalColor:red; //新的css语法，使用变量的形式，据我自己了解一般用作全局主题修改
}
div{
	background-color:red; //这是postcss在配置语法降级后处理过生成的语法
	background-color:var(--globalColor);//使用新的css语法

babel —> 帮助我们让js执行起来万无一失
对postcss有一个误区：很多人认为postcss和less sass是差不多级别的，其实它是涵盖了前俩个，他们能做到postcss都可以做
我们写的js代码(怎么爽怎么来） -->babel–>将最新的ts语法进行转换js语法 --> 再做一次语法降级 -->浏览器客户端去执行

class App{} es6的语法
function App(){} es3的语法

浏览器的兼容性你能考虑到吗，预处理器并不能解决这些问题：postcss和babel就可以帮我们做到以下事情 （目前来说less和sass等一系列预处理器postcss插件已经停止维护了

1. 对未来css属性的一些使用降级问题
2. 前缀补全：–webkit 等等，有些低版本浏览器需要

使用postcss

1.安装依赖
yarn add postcss-cli postcss -D
2.书写描述文件(类似于全屋净水系统的加插槽)
postcss.config.js //新建这个js文件，网上可以搜索配置文件的命名
yarn add postcss-preset-env -D 安装预设环境 预设环境里面包含很多的插件：语法降级 -->postcss-low-level 编译插件-->postcss-compiler

const postcssPresetEnv = require("postcss-preset-env");
//预设就是帮你一次性的把这些必要的插件都给你装上了
module.exports ={
		plugins:[postcssPresetEnv(/*pluginOptions */]
}