在vite中使用postcss

postcss是什么？

1，增强代码的可读性

利用从 Can I Use 网站获取的数据为 CSS 规则添加特定厂商的前缀。 Autoprefixer 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。

2，将未来的 CSS 特性带到今天

PostCSS Preset Env 帮你将最新的 CSS 语法转换成大多数浏览器都能理解的语法，并根据你的目标浏览器或运行时环境来确定你需要的 polyfills，此功能基于 cssdb 实现。

3，css模块化

css 模块能让你你永远不用担心命名太大众化而造成冲突，只要用最有意义的名字就行了。

4，避免 CSS 代码中的错误

通过使用 stylelint 强化一致性约束并避免样式表中的错误。stylelint 是一个现代化 CSS 代码检查工具。它支持最新的 CSS 语法，也包括类似 CSS 的语法，例如 SCSS 。

vue+vite中使用

npm i postcss -D

在项目中创建 postcss.config.ts

安装一个预设，直接使用

const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  // 安装了一个预设 预设就是相当于最佳实践，已经帮你安装好了很多东西
  plugin: [postcssPresetEnv(/* pluginOptions */)]
}

一些常用的插件与作用

autoprefixer：自动添加 CSS3 前缀。
cssnano：优化和压缩 CSS。
postcss-import：通过 @import 导入 CSS 文件。
postcss-custom-properties：使用自定义属性，类似于 Sass 中的变量。
postcss-nested：允许使用嵌套规则。
postcss-mixins：类似于 Sass 中的 mixin。
postcss-css-variables：支持 CSS 变量。
postcss-preset-env：使用最新的 CSS 语法，自动添加前缀，按需加载 polyfill。
postcss-normalize：添加浏览器默认样式的规则，以消除浏览器之间的差异。
postcss-pxtorem：将像素值转换成 rem 值，使得页面更好地适配不同大小的设备。
postcss-extend：类似于 Sass 中的 @extend。
postcss-flexbugs-fixes：修复 Flexbox 布局的一些 bug。