autoprefixer 就是 postcss 一个常用的插件
PostCSS 将 CSS 转换为 JavaScript 可以操作的数据结构。这些数据可以由插件理解和转换，然后处理成各种需要的格式。
PostCSS 扮演一个框架的角色，是一个转换 CSS 的工具。
postcss是一个css的框架，平常我们写css，都是一个个的class，维护起来也比较困难。在使用了postcss之后，我们可以在css中体现出元素之间的上下级关系，如果要删除一个模块，则可以直接删除对应的css代码块。代码类似下面这样
.reportChart {
width: 100%
background-color: rgba(0,0,0,0.25)
margin-top: 22px
&.widget {
background-color: rgba(0,0,0,0.25)
padding-bottom: 22px
}
&.title {
background-color: rgba(0,0,0,0.2)
height: 48px
line-height: 48px
color: rgba(255,255,255,0.7)
margin-bottom: 1.57rem
}
&.action {
display: inline-block
float: right
padding-right: 1.57rem
&span{
cursor: pointer
font-size: 16px
}
}
}
由于vite 官网对于postcss的描述过少，导致我在配置的时候出现了一些错误：在vite config里面使用标准的postcss配置
首先在外部创建postcss.config.js用我们熟悉的写法是可以的，但是我们的目的是在vite.config.js里面配置。
我们首先需要导入使用的插件，任何导入方式都是会被转化为es模块，然后初始化插件及配置项后，放入plugins数组里面就可以正常使用；
